Field

Form field wrapper with label, description, and error message.

#Preview

We'll never share your email.

#Installation

bunx --bun barefoot add field

#Usage

We'll never share your email.

1import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"2import { Input } from "@/components/ui/input"34function FieldDemo() {5  return (6    <Field>7      <FieldLabel for="email">Email</FieldLabel>8      <FieldContent>9        <Input id="email" type="email" placeholder="you@example.com" />10        <FieldDescription>We'll never share your email.</FieldDescription>11      </FieldContent>12    </Field>13  )14}

#Examples

#Basic

We'll never share your email.

1import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"2import { Input } from "@/components/ui/input"34function FieldBasic() {5  return (6    <Field>7      <FieldLabel for="email">Email</FieldLabel>8      <FieldContent>9        <Input id="email" type="email" placeholder="you@example.com" />10        <FieldDescription>We'll never share your email.</FieldDescription>11      </FieldContent>12    </Field>13  )14}

#Error

Username

Choose a unique username.

1import { Field, FieldContent, FieldError, FieldLabel } from "@/components/ui/field"2import { Input } from "@/components/ui/input"34function FieldWithError() {5  const [value, setValue] = createSignal('')6  const [touched, setTouched] = createSignal(false)7  const hasError = () => touched() && value().length === 089  return (10    <Field data-invalid={hasError() || undefined}>11      <FieldLabel for="username">Username</FieldLabel>12      <FieldContent>13        <Input14          id="username"15          aria-invalid={hasError() || undefined}16          value={value()}17          onInput={(e) => setValue(e.target.value)}18          onBlur={() => setTouched(true)}19        />20        {hasError() ? (21          <FieldError>Username is required.</FieldError>22        ) : (23          <FieldDescription>Choose a unique username.</FieldDescription>24        )}25      </FieldContent>26    </Field>27  )28}

#Horizontal

Accept terms and conditions

You agree to our Terms of Service and Privacy Policy.

Status: Not accepted

1import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"2import { Checkbox } from "@/components/ui/checkbox"34function FieldHorizontal() {5  return (6    <Field orientation="horizontal">7      <Checkbox />8      <FieldContent>9        <FieldLabel>Accept terms and conditions</FieldLabel>10        <FieldDescription>You agree to our Terms of Service and Privacy Policy.</FieldDescription>11      </FieldContent>12    </Field>13  )14}

#Form

1import { Field, FieldContent, FieldDescription, FieldLabel, FieldSet, FieldLegend, FieldGroup } from "@/components/ui/field"2import { Input } from "@/components/ui/input"34function RegistrationForm() {5  return (6    <form onSubmit={handleSubmit}>7      <FieldSet>8        <FieldLegend>Create Account</FieldLegend>9        <FieldGroup>10          <Field>11            <FieldLabel for="name">Full Name</FieldLabel>12            <FieldContent>13              <Input id="name" placeholder="John Doe" />14            </FieldContent>15          </Field>16          <Field>17            <FieldLabel for="email">Email</FieldLabel>18            <FieldContent>19              <Input id="email" type="email" placeholder="john@example.com" />20              <FieldDescription>We'll send a verification email.</FieldDescription>21            </FieldContent>22          </Field>23        </FieldGroup>24      </FieldSet>25    </form>26  )27}

#API Reference

Field

Prop	Type	Default	Description
orientation	'vertical' \| 'horizontal'	'vertical'	Layout orientation of the field.
data-invalid	'true' \| undefined	-	Set to "true" to apply error styling.
className	string	-	Additional CSS class names.
children	Child	-	The content displayed inside the field.

FieldLabel

Prop	Type	Default	Description
for	string	-	The id of the form control this label is associated with.
className	string	-	Additional CSS class names.
children	Child	-	The content displayed inside the label.

FieldContent

Prop	Type	Default	Description
className	string	-	Additional CSS class names.
children	Child	-	Wraps the input control, description, and error.

FieldDescription

Prop	Type	Default	Description
className	string	-	Additional CSS class names.
children	Child	-	Descriptive text content.

FieldError

Prop	Type	Default	Description
className	string	-	Additional CSS class names.
children	Child	-	Error message content. Uses role="alert" for screen readers.

FieldSet

Prop	Type	Default	Description
className	string	-	Additional CSS class names.
children	Child	-	Groups multiple Field components.

FieldLegend

Prop	Type	Default	Description
variant	'legend' \| 'label'	'legend'	The visual variant of the legend.
className	string	-	Additional CSS class names.
children	Child	-	The content displayed inside the legend.

FieldGroup

Prop	Type	Default	Description
className	string	-	Additional CSS class names.
children	Child	-	Groups multiple fields within a FieldSet.