A stable label, description, error, and control composition for form inputs.
RequiredDescriptionError
Alert when the value exceeds this limit.
<Field label="Threshold">{#snippet children(id)}<input {id} />{/snippet}</Field>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Field } from '@chanrg/4ui';<Field label="Threshold">{#snippet children(id)}<input {id} />{/snippet}</Field>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | required | Visible field label. |
error | string | '' | Validation feedback. |
controlId | string | generated | Stable explicit association. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Uses explicit label/control association.
- Errors are announced with role=alert.