Basic
Basic form control usage.
formsbeta
Switch
Switch component for Vellira applications.
Options
Usage
Import the component and configure it with the same props used in the playground.
Examples
Common patterns and practical usage examples.
Disabled
Disabled state.
Selected
Selected state.
Required
Required form control.
API
Props available for the React Switch.
| Prop | Type | Default | Description |
|---|---|---|---|
accessibilityLabel | string | - | Accessible name announced by assistive technology. |
checked | boolean | - | Controlled checked state. |
defaultChecked | boolean | - | Initial checked state for uncontrolled usage. |
disabled | boolean | - | Disables interaction. |
required | boolean | - | Marks the control as required. |
invalid | boolean | - | Marks the control as invalid. |
onCheckedChange | ( | - | Called when the checked state changes. |
Accessibility
Guidance for accessible usage and interaction.
Accessible naming
Provide a visible label or another accessible name that clearly identifies the control.
State communication
Expose the current interactive state through the appropriate native semantics and keep it synchronized with the visual state.
checkedDisabled state
Disabled controls should remain identifiable while preventing interaction.
disabledRequired fields
Required state should be communicated semantically and not rely only on visual styling.
requiredKeyboard and focus
Preserve expected keyboard interaction and visible focus behavior.