Field
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Field } from "@corew500/ui/field"
<Field>Content</Field>Variants
fieldVariants
| Axis | Values | Default |
|---|---|---|
| orientation | verticalhorizontalresponsive | vertical |
CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | enum | vertical | — |
Accessibility
Screen Readers
- - `Field` uses `role="group"` for proper grouping semantics
- `FieldError` uses `role="alert"` for screen reader announcements
Additional
- `FieldSet` uses native `<fieldset>` element for form grouping
- `FieldLegend` uses native `<legend>` for fieldset labeling
- Labels are properly associated with inputs via `htmlFor`
- Disabled state indicated via `data-disabled` and reduced opacity
Localization
Translatable Content
- - All text content (labels, descriptions, errors) are passed as children
- Components accept pre-resolved translated strings
- Error messages should be pre-translated before passing to `FieldError`