deno.land / x / netzo@0.5.16 / components / form-fields.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218import { Checkbox } from "./checkbox.tsx";import { Combobox, ComboboxProps } from "./combobox.tsx";import type { UseFormReturn } from "./form.tsx";import { FormControl, FormField, FormItem, FormLabel, FormMessage,} from "./form.tsx";import { Input, InputProps } from "./input.tsx";import { RadioGroup, RadioGroupItem } from "./radio-group.tsx";import { SelectMultiple, SelectMultipleProps } from "./select-multiple.tsx";import { Slider } from "./slider.tsx";import { Switch } from "./switch.tsx";import { Textarea, TextareaProps } from "./textarea.tsx";import { cn } from "./utils.ts";
export type FormFieldProps = { name: string; label: string; form: UseFormReturn; className?: string;};
export const FormFieldInput = ({ name, label, form, className, ...props}: FormFieldProps & InputProps) => { return ( <FormField control={form.control} name={name} render={({ field }) => ( <FormItem className={cn(className)}> {label && <FormLabel>{label}</FormLabel>} <FormControl> <Input {...field} {...props} /> </FormControl> <FormMessage /> </FormItem> )} /> );};
export const FormFieldTextarea = ({ name, label, form, className, ...props}: FormFieldProps & TextareaProps) => { return ( <FormField control={form.control} name={name} render={({ field }) => ( <FormItem className={cn(className)}> {label && <FormLabel>{label}</FormLabel>} <FormControl> <Textarea {...field} {...props} /> </FormControl> <FormMessage /> </FormItem> )} /> );};
export const FormFieldCombobox = ({ name, label, form, options, className, ...props}: FormFieldProps & ComboboxProps) => { return ( <FormField control={form.control} name={name} render={({ field }) => ( <FormItem className={cn(className)}> {label && <FormLabel>{label}</FormLabel>} <FormControl> <Combobox {...field} {...props} options={options} /> </FormControl> <FormMessage /> </FormItem> )} /> );};
export const FormFieldSelectMultiple = ({ name, label, form, options, className, ...props}: FormFieldProps & SelectMultipleProps) => { return ( <FormField control={form.control} name={name} render={({ field }) => ( <FormItem className={cn(className)}> {label && <FormLabel>{label}</FormLabel>} <FormControl> <SelectMultiple {...field} {...props} options={options} /> </FormControl> <FormMessage /> </FormItem> )} /> );};
export const FormFieldCheckbox = ({ name, label, form, className, ...props}: FormFieldProps) => { return ( <FormField control={form.control} name={name} render={({ field }) => ( <FormItem className={cn(className)}> <FormControl> <Checkbox {...field} {...props} /> {label && <FormLabel>{label}</FormLabel>} </FormControl> <FormMessage /> </FormItem> )} /> );};
export const FormFieldRadioGroup = ({ name, label, form, options, className, ...props}: FormFieldProps & { options: ComboboxProps["options"] }) => { return ( <FormField control={form.control} name={name} render={({ field }) => ( <FormItem className={cn(className)}> <FormControl> <RadioGroup {...field} {...props}> {options.map((option) => ( <RadioGroupItem key={option.value} value={option.value}> {option.label} </RadioGroupItem> ))} </RadioGroup> {label && <FormLabel>{label}</FormLabel>} </FormControl> <FormMessage /> </FormItem> )} /> );};
export const FormFieldSwitch = ( { name, label, form, className, ...props }: FormFieldProps,) => { return ( <FormField control={form.control} name={name} render={({ field }) => ( <FormItem className={cn(className)}> <FormControl> <Switch {...field} {...props} /> {label && <FormLabel>{label}</FormLabel>} </FormControl> <FormMessage /> </FormItem> )} /> );};
export const FormFieldSlider = ( { name, label, form, className, ...props }: FormFieldProps,) => { return ( <FormField control={form.control} name={name} render={({ field }) => ( <FormItem className={cn(className)}> <FormControl> <Slider {...field} {...props} /> {label && <FormLabel>{label}</FormLabel>} </FormControl> <FormMessage /> </FormItem> )} /> );};
Version Info