diff --git a/examples/shadcn-ui/src/App.tsx b/examples/shadcn-ui/src/App.tsx index ecd99efb..b1e07e4e 100644 --- a/examples/shadcn-ui/src/App.tsx +++ b/examples/shadcn-ui/src/App.tsx @@ -44,6 +44,7 @@ const UserSubscriptionSchema = z.object({ accountType: z.enum(['personal', 'business'], { required_error: 'You must select an account type', }), + accountTypes: z.array(z.enum(['personal', 'business'])).min(1,'You must select at least one account type'), interests: z .array(z.string()) .min(3, 'You must select at least three interest'), @@ -164,6 +165,22 @@ function App() { <FieldError>{fields.accountType.errors}</FieldError> )} </Field> + <Field> + <Label htmlFor={fields.accountTypes.id}>Account types</Label> + <ToggleGroupConform + type="multiple" + meta={fields.accountTypes} + items={[ + { value: 'personal', label: 'Personal' }, + { value: 'business', label: 'Business' }, + { value: 'business2', label: 'Business2' }, + ]} + /> + {fields.accountTypes.allErrors && ( + <FieldError>{ + Object.values(fields.accountTypes.allErrors).flat()}</FieldError> + )} + </Field> <Field> <fieldset>Interests</fieldset> <CheckboxGroupConform diff --git a/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx b/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx index 47da3b2e..36597336 100644 --- a/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx +++ b/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx @@ -6,19 +6,20 @@ import { ComponentProps, ElementRef, useRef } from 'react'; import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'; export const ToggleGroupConform = ({ + type = 'single', meta, items, ...props }: { items: Array<{ value: string; label: string }>; - meta: FieldMetadata<string>; + meta: FieldMetadata<string | string[]>; } & Omit<ComponentProps<typeof ToggleGroup>, 'defaultValue'>) => { const toggleGroupRef = useRef<ElementRef<typeof ToggleGroup>>(null); - const control = useControl(meta); + const control = useControl<string | string[]>(meta); return ( <> - <input + {type === 'single' ? <input name={meta.name} ref={control.register} className="sr-only" @@ -27,9 +28,28 @@ export const ToggleGroupConform = ({ onFocus={() => { toggleGroupRef.current?.focus(); }} - /> + /> : <select + multiple + name={meta.name} + className="sr-only" + ref={control.register} + onFocus={() => { + toggleGroupRef.current?.focus(); + }} + defaultValue={meta.initialValue} + tabIndex={-1} + > + {items.map((item) => ( + <option value={item.value} key={item.value}> + {item.label} + </option> + ))} + </select> + } + <ToggleGroup {...props} + type={type} ref={toggleGroupRef} value={control.value} onValueChange={(value) => {