docs: enable multiple-type toggle-group in shadcn-ui examples (#753)

edmundhung · Sep 10, 2024 · a0e422f · a0e422f
1 parent c0c3195
commit a0e422f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 4 deletions.
diff --git 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
@@ -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) => {