Choice1 check

FormSwitch

On or off for a setting.

Example

Installation

bunx --bun shadcn@latest add @fieldkit/form-switch

Needs the @fieldkit registry. Add it once

Usage

Add the field to your schema

schema.ts

import { z } from "zod"
export const schema = z.object({  notifications: z.boolean(),})

Render it inside a Form

The name prop matches the schema key.

example-form.tsx

import { Form } from "@/components/form/form"import { FormSwitch } from "@/components/form/form-switch"import { FormSubmit } from "@/components/form/form-submit"import { FieldGroup } from "@/components/ui/field"import { schema } from "./schema"
export function ExampleForm() {  return (    <Form      schema={schema}      defaultValues={{ notifications: false }}      onSubmit={save}    >      <FieldGroup>        <FormSwitch name="notifications" />        <FormSubmit>Save</FormSubmit>      </FieldGroup>    </Form>  )}

Checks

CheckOptionError message

True or falsez.boolean()None

Best practices

Use for settings, not consent

Try these values

Terminal

z.boolean()

Input	Result	Output
`true`	Valid	`true`
`false`	Valid	`false`

API reference

FormSwitch

PropDescription

labelReact.ReactNodeDefaults to the label from the name.

Field frame

PropDescription

namestringKey in the schema. Also picks the preset label and autocomplete.

labelReact.ReactNodeOverrides the preset label. Pass null to hide it.

descriptionReact.ReactNodeHint under the control.

requiredbooleanOverrides the asterisk read from the schema.

fieldPropsFormFieldPropsProps for the wrapping Field, such as className.

Add the field to your schema

Render it inside a Form

FormSwitch

Field frame

Search docs