Toggle & ToggleGroup Component
React toggle button and segmented toggle group with single and multiple selection, icons, sizes and aria-pressed semantics — built with Tailwind CSS.
Import
1import { Toggle, ToggleGroup } from "@neuctra/ui";Toggle — Basic Usage
A two-state button. Controlled via pressed/onPressedChange or uncontrolled with defaultPressed.
ToggleGroup — Single Selection
A segmented control: exactly one value at a time (clicking the active one clears it).
ToggleGroup — Multiple & Full Width
Props
All available props for the Toggle & ToggleGroup component.
| Prop | Type | Default | Description |
|---|---|---|---|
| Toggle.pressed / defaultPressed | boolean | false | Controlled / uncontrolled state |
| Toggle.onPressedChange | (pressed) => void | — | Fired with the next state |
| Toggle.variant | "default" | "outline" | "default" | Borderless or bordered |
| ToggleGroup.options | ToggleGroupOption[] | — | { value, label?, icon?, disabled?, ariaLabel? } |
| ToggleGroup.type | "single" | "multiple" | "single" | Selection model |
| ToggleGroup.value / defaultValue | string | string[] | — | Controlled / uncontrolled selection |
| ToggleGroup.onChange | (value) => void | — | String (single) or string[] (multiple) |
| ToggleGroup.fullWidth | boolean | false | Stretch options evenly |
| ToggleGroup.disabled | boolean | false | Disables every option in the group |
| ToggleGroup.itemClassName | string | — | Styles each option button |
| ToggleGroup.iconClassName | string | — | Styles the icon wrapper inside each option |
| size | "sm" | "md" | "lg" | "md" | Both components |
Accessibility
- Every option is a real button with aria-pressed reflecting its state.
- Icon-only options should set ariaLabel; focus rings are inset so the segmented border stays clean.
Frequently Asked Questions
How do I install and import the ToggleGroup component?
Install the @neuctra/ui package, then import it with: import { ToggleGroup } from "@neuctra/ui";
What variants and sizes does ToggleGroup support?
ToggleGroup supports sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the ToggleGroup component accessible?
ToggleGroup is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.