Choice2 checks
FormMultiSelect
Several options, shown as chips.
Example
Installation
bunx --bun shadcn@latest add @fieldkit/form-multi-selectNeeds the @fieldkit registry. Add it once
Usage
- 1
Add the field to your schema
schema.tsimport { z } from "zod"import { optionsField } from "@/lib/field-schemas" export const schema = z.object({ frameworks: optionsField({ max: 3, noun: "frameworks" }),}) - 2
Render it inside a Form
The name prop matches the schema key.
example-form.tsximport { Form } from "@/components/form/form"import { FormMultiSelect } from "@/components/form/form-multi-select"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={{ frameworks: [] }} onSubmit={save} > <FieldGroup> <FormMultiSelect name="frameworks" options={frameworks} /> <FormSubmit>Save</FormSubmit> </FieldGroup> </Form> )}
Checks
CheckOptionError message
Fewest and most
min, maxChoose up to 3 frameworksVirtualized list
auto above 100NoneLong lists
Every country, up to 5 chosen.
Best practices
- Shows how many are chosen and disables the rest at the limit
Try these values
Terminal
optionsField({ min: 1, max: 3, noun: "frameworks" })| Input | Result | Output |
|---|---|---|
["react"] | Valid | ["react"] |
[] | Invalid | Choose at least 1 frameworks |
["react","zod","vite","hono"] | Invalid | Choose up to 3 frameworks |
API reference
FormMultiSelect
PropDescription
options (required)Array<{ value, label, keywords?, hint?, disabled? }>The choices.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.