Toggle API
API reference docs for theTogglecomponent. For examples and details on the usage of this component, visit the component demo page.
Props
| Prop | Type | Description | Default |
|---|---|---|---|
label | ReactNode | Label for the toggle describing its purpose. | _ |
isDisabled? | boolean | Disables the toggle, making it non-interactive and visually styled as disabled. | false |
size? | 'standard'| 'large' | The size of the toggle. | standard |
value? | string | Defines the value of the toggle input, used when submitting a form. | _ |
checked? | boolean | Sets the checked state of the toggle when using controlled components. | _ |
id? | string | A unique ID for the toggle. | _ |
name? | boolean | The name attribute of the toggle, useful for grouping in forms. | _ |
description? | ReactNode | Description text displayed alongside the toggle, providing additional context. | _ |
aria-describedby? | string | The ID of the element that describes the toggle for accessibility. | _ |
onBlur? | function | Event handler triggered when the toggle loses focus. | _ |
onClick? | function | Event handler triggered when the toggle is clicked. | _ |
onChange? | function | Event handler triggered when the toggle value changes. | _ |
togglePosition? | 'start' | 'end' | Placement of the toggle primitive relative to the label. 'start' shows the label on the left and toggle on the right; 'end' reverses this. | start |