ToggleGroup

a collection of toggle buttons capable of being switched between two states: on or off.

Props

The default selected value. When multiple is true, value should be an array.

string

"option1"

array[string]

["option1", "option2"]

Whether to allow multiple options to be selected. When multiple is true, 'value' should be an array of selected options.

boolean

true

false

Function that will be called when the user selects an option.

function

({ value: nextValue }) => setValue(nextValue)

Options can be either an array of type string, or object. Each option is rendered as a single Button within ToggleGroup.

string

["option1", "option2"]

array[object]


[
  {
    icon: <Bold />,
    label:  "Bold"
    value: "bold"
  }
]

The currently selected value. When multiple is true, value should be an array.

string

"option1"

array[string]

["option1", "option2"]

The amount of padding on the buttons.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"any CSS size"

object

An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side.


{
  vertical: "11px",
  horizontal: "11px",
}


{
  vertical: "...",
  horizontal: "...",
  top: "...",
  bottom: "...",
  left: "...",
  right: "...",
  start: "...",
  end: "..."
}

The amount of padding around the Button when icon only.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"any CSS size"

object

An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side.


{
  vertical: "...",
  horizontal: "...",
  top: "...",
  bottom: "...",
  left: "...",
  right: "...",
  start: "...",
  end: "..."
}

Any valid Box property for the Tip container.

object

{
  round: 'xsmall', 
  border: true,
}

The color of the divider between the buttons.

sting

border