Form Field
FormForm field wrapper: label, description, animated error message. Provides context (id, error, disabled) to child components.
Playground
We will never share your email.
Controls
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label displayed above the field. |
description | string | — | Helper text displayed below the label. |
error | string | — | Error message (shows error state on the field). |
required | boolean | false | Mark the field as required. |
disabled | boolean | false | Disable the field. |
id | string | — | Custom ID (auto-generated if not provided). |
orientation | 'vertical' | 'horizontal' | "vertical" | Label / input layout. |
Examples
With error
This username is already taken.
vue
<DsFormField
label="Username"
error="This username is already taken."
required
/>Horizontal
As it appears on your ID.
vue
<DsFormField
label="Full name"
description="As it appears on your ID."
orientation="horizontal"
/>Disabled
Read-only.
vue
<DsFormField
label="API Key"
description="Read-only."
disabled
/>Skeleton
Use DsFormFieldSkeleton as a loading placeholder while content is being fetched.
Default
vue
<DsFormFieldSkeleton />With description
vue
<DsFormFieldSkeleton showDescription />Accessibility
- The label is linked to the field via htmlFor/for.
- The error message has role="alert" to announce it to screen readers.
- The ID is auto-generated if not provided.