Atoms
Toggle group
A set of related toggle buttons.
Usage
Import the stylesheet once at the application root: @exegia/corpora-ui/index.css.
import { ToggleGroup, ToggleGroupItem } from "@exegia/corpora-ui/ui/toggle-group"
function ComponentPreview({ multiple }: { multiple: boolean }) {
return (
<div className="relative mx-auto w-full max-w-lg p-6">
<ToggleGroup multiple={multiple} defaultValue={["bold"]} aria-label="Text formatting"><ToggleGroupItem value="bold">Bold</ToggleGroupItem><ToggleGroupItem value="italic">Italic</ToggleGroupItem></ToggleGroup>
</div>
)
}
<ComponentPreview {...{ multiple: true }} />API notes
value and defaultValue are arrays of selected values. multiple allows several buttons to be pressed. orientation, variant, and size configure the group.
Last updated on