UI component
Toggle
Toggle provides an accessible on/off switch with optional labels, helper text, and validation messaging for settings and preference screens.
Installation
Install the package in your app.
pnpm add @rapidset/rapidkitUsage
Import components from the package entrypoint.
import { Toggle } from '@rapidset/rapidkit';Examples
Preview the component and copy the snippet.
Email alerts
API Reference
Commonly used props at a glance.
| Prop | Description |
|---|---|
| name | Identifies the toggle in handlers and form submissions when used inside forms. |
| checked and defaultChecked | Support both controlled state and initial uncontrolled state for flexible integration. |
| onCheckedChange and onToggleChange | Receives value updates as a boolean, with optional field name payload for form coordination. |
| label, title, helperText, and error | Provides context, guidance, and validation feedback around the switch control. |
| accessRequirements and resolveAccess | Injects host access checks without coupling the component to app-specific authorization models. |
Accessibility
Toggle uses accessible switch primitives and connects visible label text to the control using id/htmlFor for stronger screen reader context.
Optional access rules
Optional access rules let Toggle render null when view access is denied or remain visible but disabled when edit access is denied.