Field · ui.voila.dev

Optional

<Field.Group>
	<Field.Root>
		<Field.Label htmlFor="workspace-name">Client name</Field.Label>
		<Input id="workspace-name" />
		<Field.Description>Shown to freelancers on every project.</Field.Description>
	</Field.Root>
	<Field.Root data-invalid>
		<Field.Label htmlFor="contact-email">Contact email</Field.Label>
		<Input id="contact-email" aria-invalid />
		<Field.Error>Enter a complete email address.</Field.Error>
	</Field.Root>
</Field.Group>

Field.Set and Field.Legend wrap a group of related fields in the right semantics; Field.Separator takes a label for an "Optional" divider.

API

Field.Root

Prop	Type	Default
`invalid`	`boolean`	—
`orientation`	`"horizontal" \| "responsive" \| "vertical"`	`"vertical"`
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: field/components/field-root.tsx.

Field.Content

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: field/components/field-content.tsx.

Field.Description

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <p> prop. Source: field/components/field-description.tsx.

Field.Error

Prop	Type	Default
`errors`	`({ message?: string \| undefined; } \| undefined)[]`	—

Plus every <div> prop. Source: field/components/field-error.tsx.

Field.Group

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: field/components/field-group.tsx.

Field.Label

Plus the DOM props of the element it renders. Source: field/components/field-label.tsx.

Field.Legend

Prop	Type	Default
`variant`	`"label" \| "legend"`	`"legend"`

Plus every <legend> prop. Source: field/components/field-legend.tsx.

Field.Separator

Prop	Type	Default
`children`	`ReactNode`	—

Plus every <div> prop. Source: field/components/field-separator.tsx.

Field.Set

Plus every <fieldset> prop. Source: field/components/field-set.tsx.

Field.Title

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: field/components/field-title.tsx.