Forms and controls

Toggle

SMRTToggle - An accessible toggle/switch component Features: - Native checkbox semantics for accessibility - Bindable checked state - Disabled state - Labels on either side - Size variants - Material 3 styling

Public export

typescript

import { Toggle } from '@happyvertical/smrt-ui/forms';

Import path: @happyvertical/smrt-ui/forms
Props: 10
Props described: 10 of 10
Bindable state: 0
Callback events: 1
Verified release: 0.44.0

Props

NameTypeRequiredDescription

checkedbooleanNoWhether the toggle is checked

disabledbooleanNoWhether the toggle is disabled

namestringNoName attribute for form submission

valuestringNoValue attribute for form submission

labelstringNoLabel text

labelPosition'left' | 'right'NoPosition of the label

size'sm' | 'md' | 'lg'NoSize variant

idstringNoID for the input element

ariaLabelstringNoARIA label for accessibility

onchange(checked: boolean) => voidNoChange callback

Bindable state

This component has no bindable public state.

Callback events

onchange(checked: boolean) => void

Public export

Props

Bindable state

Callback events

Examples and explanation