ToggleGroup

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

Props

defaultValue

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

string

"option1"

array[string]

["option1", "option2"]

multiple

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

boolean

true

false

onToggle

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

function

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

options

Options can be either an array of type string, or object. Each option is rendered as a single Button within ToggleGroup. The options that can be passed in can be icon, label, value, tip

string

["option1", "option2"]

array[object]


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

value

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

string

"option1"

array[string]

["option1", "option2"]

Theme

toggleGroup.button.pad

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: "..."
}

toggleGroup.button.iconOnly.pad

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: "..."
}

toggleGroup.border.radius

The border radius used for buttons.

string

"24px"

toggleGroup.container

Any valid Box property for the ToggleGroup container.

object

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

toggleGroup.divider

Whether to have the divider between the buttons.

boolean

true

false

toggleGroup.divider.color

The color of the divider between the buttons.

sting

border

toggleGroup.kind

The button kind for buttons in a ToggleGroup. Any pre-defined kind from theme.button.kind.

sting

'toolbar'