Field

A form component that encapsulates a form input alongside its associated label, description, and validation errors.

Name *The quick brown fox jumps over

Disabled

Use the disabled class to disable the component.

Name *

Valid

Use the data-valid attr or the valid class to indicate an valid state.

Name *Name is valid

Invalid

Use the data-invalid attr or the invalid class to indicate an invalid state.

Name *Name is required

Sizes

Use the field-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Name *The quick brown fox jumps over

Customizing

globals.css


:root {
  --ex-field-gap-y-sm: calc(var(--spacing) * 2.5);
  --ex-field-gap-y-md: calc(var(--spacing) * 2.5);
  --ex-field-gap-y-lg: calc(var(--spacing) * 2.5);
 
  --ex-field-label-font-family: var(--font-sans);
  --ex-field-label-font-weight: var(--font-weight-semibold);
 
  --ex-field-label-font-size-sm: var(--text-xs);
  --ex-field-label-font-size-md: var(--text-sm);
  --ex-field-label-font-size-lg: var(--text-base);
 
  --ex-field-helper-font-family: var(--font-sans);
  --ex-field-helper-font-weight: var(--font-weight-normal);
  --ex-field-helper-opacity: var(--ex-options-opacity-muted);
 
  --ex-field-helper-font-size-sm: var(--text-xs);
  --ex-field-helper-font-size-md: var(--text-sm);
  --ex-field-helper-font-size-lg: var(--text-base);
 
  --ex-field-error-color: var(--ex-options-input-color-invalid);
  --ex-field-error-color-dark: var(--ex-options-input-color-invalid-dark);
  --ex-field-error-font-family: var(--font-sans);
  --ex-field-error-font-weight: var(--font-weight-medium);
 
  --ex-field-error-font-size-sm: var(--text-xs);
  --ex-field-error-font-size-md: var(--text-sm);
  --ex-field-error-font-size-lg: var(--text-base);
 
  --ex-field-success-color: var(--ex-options-input-color-valid);
  --ex-field-success-color-dark: var(--ex-options-input-color-valid-dark);
  --ex-field-success-font-family: var(--font-sans);
  --ex-field-success-font-weight: var(--font-weight-medium);
 
  --ex-field-success-font-size-sm: var(--text-xs);
  --ex-field-success-font-size-md: var(--text-sm);
  --ex-field-success-font-size-lg: var(--text-base);
 
  --ex-field-required-indicator-color: var(--ex-options-input-color-invalid);
  --ex-field-required-indicator-color-dark: var(--ex-options-input-color-invalid-dark);
  --ex-field-required-indicator-font-family: var(--font-sans);
  --ex-field-required-indicator-font-weight: var(--font-weight-normal);
}

API

Field

Element	Selector
`Field`	`.ex-field`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Field Helper

Element	Selector
`Field.Helper`	`.ex-field-helper`

Prop	Type	Default
`as`	`ElementType`	`span`
`asChild`	`boolean`	`false`

Field Error

Element	Selector
`Field.Error`	`.ex-field-error`

Prop	Type	Default
`as`	`ElementType`	`span`
`asChild`	`boolean`	`false`

Field Success

Element	Selector
`Field.Success`	`.ex-field-success`

Prop	Type	Default
`as`	`ElementType`	`span`
`asChild`	`boolean`	`false`

Field Required Indicator

Element	Selector
`Field.RequiredIndicator`	`.ex-field-required-indicator`

Prop	Type	Default
`as`	`ElementType`	`span`
`asChild`	`boolean`	`false`