ToggleGroup

A row of toggles where one or several can be pressed.

ToggleGroup.tsx

import {ToggleGroup, ToggleGroupItem} from 'alinea/components'
import {IcOutlineGridView, IcOutlineTableRows} from 'alinea/dashboard/icons'

export function ToggleGroupExample() {
  return (
    <ToggleGroup type="single" defaultValue="cards" aria-label="Layout">
      <ToggleGroupItem value="cards" icon={IcOutlineGridView}>
        Cards
      </ToggleGroupItem>
      <ToggleGroupItem value="table" icon={IcOutlineTableRows}>
        Table
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Props

`<ToggleGroup>`

A set of two-state buttons that can be toggled on or off

PropTypeDefaultDescription

type*'single' | 'multiple'Default –

valuestring | Array<string>Default –The pressed item, an empty string when none is pressed

defaultValuestring | Array<string>Default –

onValueChange((value: string) => void) | ((value: Array<string>) => void)Default –

variant'default' | 'outline'Default 'default'

size'default' | 'sm' | 'lg'Default 'default'

disabledbooleanDefault –

orientationOrientationDefault 'horizontal'

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<ToggleGroupItem>`

PropTypeDefaultDescription

value*stringDefault –

iconIconType | ReactElementDefault –

disabledbooleanDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.