Switch
An on/off toggle for settings that take effect right away, in two sizes with disabled and invalid states, plus nested AutoForm fields.
Preview
Usage
import { AutoForm } from '@vitnode/core/components/form/auto-form'
import { AutoFormSwitch } from '@vitnode/core/components/form/fields/switch'
import { z } from 'zod'
const formSchema = z.object({
maintenance: z.boolean().default(false),
})<AutoForm
formSchema={formSchema}
fields={[
{
id: 'maintenance',
component: (props) => (
<AutoFormSwitch {...props} label="Maintenance mode" />
),
},
]}
/>States
Top threads, every Monday morning.
Your administrator manages this.
Add an avatar before going public.
size="sm"fits dense lists. The default is"default".disableddims it. Adddata-disabledto the parent Field to dim the label too.aria-invalidadds a red ring. Pointaria-describedbyat the error.
<Field orientation="horizontal">
<FieldLabel htmlFor="compact">Compact thread list</FieldLabel>
<Switch id="compact" size="sm" />
</Field>Nested fields
AutoFormSwitch can reveal the settings it controls in the same card. See
Auto Form - Nested fields.
Props
Prop
Type
Every Base UI Switch prop works too.