FieldLabel props
FieldLabel accepts the following props: className (string, optional). It is styled for both direct inputs and nested Field children and typically includes an htmlFor attribute to link to a control.
shadcn/ui · Components · all subjects
field/props
21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Field component props
The Field component accepts the following props: orientation (type: "vertical" | "horizontal" | "responsive", default: "vertical"), className (type: string), and data-invalid (type: boolean).
FieldSet component props
The FieldSet component accepts the following props: className (type: string).
FieldLegend component props
The FieldLegend component accepts the following props: variant (type: "legend" | "label", default: "legend"), className (type: string).
FieldGroup component props
The FieldGroup component accepts the following props: className (type: string).
FieldContent component props
The FieldContent component accepts the following props: className (type: string).
FieldLabel component props
The FieldLabel component accepts the following props: className (type: string), asChild (type: boolean, default: false).
FieldTitle component props
The FieldTitle component accepts the following props: className (type: string).
FieldDescription component props
The FieldDescription component accepts the following props: className (type: string).
FieldSeparator component props
The FieldSeparator component accepts the following props: className (type: string). It is a visual divider to separate sections inside a FieldGroup and can accept optional inline content.
FieldError component props
The FieldError component accepts the following props: errors (type: Array<{ message?: string } | undefined>), className (type: string). When the errors array contains multiple messages, the component renders a list automatically. FieldError also accepts issues produced by validators that implement Standard Schema, including Zod, Valibot, and ArkType.
Field props and orientation options
Field accepts the following props: orientation (type: 'vertical' | 'horizontal' | 'responsive', default: 'vertical'), className (type: string, no default), data-invalid (type: boolean, no default). Orientation controls layout direction.
FieldSet props and API
FieldSet accepts the following props: className (type: string, no default). It renders a semantic fieldset element with spacing presets.
FieldLegend props and variants
FieldLegend accepts: variant (type: 'legend' | 'label', default: 'legend'), className (type: string, no default). The legend variant is standard, and the label variant applies label sizing and alignment, useful for nested FieldSet components.
FieldGroup props and API
FieldGroup accepts: className (type: string, no default). It is a layout wrapper that stacks Field components and enables container queries for responsive orientations.
FieldContent props and API
FieldContent accepts: className (type: string, no default). It is a flex column that groups control and descriptions when the label sits beside the control. Not required if there is no description.
FieldLabel props and API
FieldLabel accepts: className (type: string, no default). It is styled for both direct inputs and nested Field children and takes an htmlFor attribute to connect with inputs.
FieldTitle props and API
FieldTitle accepts: className (type: string, no default). It renders a title with label styling inside FieldContent.
FieldDescription props and API
FieldDescription accepts: className (type: string, no default). It is a helper text slot that automatically balances long lines in horizontal layouts.
FieldSeparator props and API
FieldSeparator accepts: className (type: string, no default). It is a visual divider to separate sections inside a FieldGroup and accepts optional inline content.
FieldError props and API
FieldError accepts: errors (type: Array<{ message?: string } | undefined>, no default), className (type: string, no default). It is an accessible error container that accepts children or an errors array from react-hook-form. When the errors array contains multiple messages, it renders a list automatically. It also accepts issues from Standard Schema validators including Zod, Valibot, and ArkType.