ToggleButtonGroup

ToggleButtonGroup allows users to trigger actions or events with a single click anywhere within the button container. Users can also trigger a button by pressing Enter or Space while the button has focus.

OverviewPropertiesUsage

ToggleButtonGroupProps

Signature:

export declare type ToggleButtonGroupProps = <, (value: , event?: < | >) => | > & & & & & & { /** * The width of the ToggleButtonGroup. * @defaultValue */ width?: | | ..< & {}>; };

ToggleButtonGroupBaseProps

Deprecated

will be removed, use from forms ToggleButtonGroupProps instead.

extends, , , , ,

Name	Type	Default	Description
required?		false	When true, at least one item in the group has to be active. Otherwise, no item needs to be active.
readOnly?		false	When true, all items in the group are read only.
name?			Name used for the component when submitting it in a form.
disabled?		false	When true, all items in the group are disabled and this means for example they cannot be interacted with.

ToggleButtonGroupControlledProps

Deprecated

will be removed, use from forms ToggleButtonGroupProps instead.

Name	Type	Default	Description
value			The controlled value for the entire ToggleButtonGroup.
onChange	(value: , event?: < | >) =>		Handler that is called when the value of the group changes.

ToggleButtonGroupUncontrolledProps

Deprecated

will be removed, use from forms ToggleButtonGroupProps instead.

Name	Type	Default	Description
defaultValue?			The value of the group (uncontrolled).

ToggleButtonGroupItem

You can use the ToggleButtonGroupItem component to render an item inside the ToggleButtonGroup.

ToggleButtonGroupItemProps

Signature:

export declare type ToggleButtonGroupItemProps = <, > & & & & & & { /** When a tooltip is provided, text is shown on hover. */ tooltip?: ; /** * Zero or more items in a group can be checked. * @defaultValue false * @deprecated unused, will be removed */ checked?: ; /** * Indicates if the mover is currently over the item. * @defaultValue false * @deprecated unused, will be removed */ hovered?: ; };