Choice list
React componentChoose one or several options in a visible list.
Try it out
Use the live controls or open the Code tab to view and copy the example.
API reference
Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.
| Prop | Type | Description |
|---|---|---|
optionsRequired | ChoiceOption[] | Selectable values with stable unique identifiers. |
value | string[] | undefined | Controlled value. Pair with its change callback. |
defaultValue | string[] | undefinedDefault: [] | Initial value for uncontrolled usage. |
onValueChange | ((value: string[]) => void) | undefined | Called with the next value. Update controlled state here. |
multiple | boolean | undefined | See the typed definition and working example for this option. |
disabled | boolean | undefined | Disables interaction (or date matchers for DatePicker). |
name | string | undefined | Field name used in form submission. |
required | boolean | undefined | Participates in native form validation. |
labelRequired | string | A meaningful visible or accessible label. |
description | string | undefined | Supporting instructions associated with the control. |
error | string | undefined | Validation message; also sets aria-invalid. |
hideLabel | boolean | undefined | See the typed definition and working example for this option. |
Accessibility & interaction
Use a persistent visible label and provide textual errors; native controls support keyboard input and browser form constraints.
Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.
Variants & implementation notes
Uses fieldset/legend and native radio or checkbox inputs. Values are arrays in both modes. Rich secondary option content is not exposed; option labels are strings.
Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.