edbnedbn/ui
ComponentsMapsAudioPDF
GitHub stars
Explorer
Get Started
Components

Field

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

Componentsdocsbase-ui/field

Installation

npx shadcn@latest add https://ui.edbn.me/r/field.json

Manual

API Reference

Root

Groups all parts of the field. Renders a div element.

namestring

Field name

disabledboolean
=false

Disable field

invalidboolean

Invalid state

validatefunction

Custom validation function

validationMode'onSubmit' | 'onChange' | 'onBlur'
='onSubmit'

When to validate

validationDebounceTimenumber
=0

Validation debounce delay

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Root data attributes
AttributeDescription
data-disabledPresent when field is disabled
data-validPresent when field is valid
data-invalidPresent when field is invalid
data-dirtyPresent when value has changed
data-touchedPresent when field has been touched

Label

An accessible label for the field control. Renders a label element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Label data attributes
AttributeDescription
data-disabledPresent when field is disabled
data-validPresent in valid state
data-invalidPresent in invalid state

Control

The form control to label and validate. Renders an input element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Description

Additional information about the field. Renders a p element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Error

An error message displayed when validation fails. Renders a div element.

matchstring | string[] | RegExp

Error rule to match

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Error data attributes
AttributeDescription
data-starting-stylePresent when error is animating in
data-ending-stylePresent when error is animating out