Field
Wrapper for native form controls in the light DOM.
Properties
| Property | Attribute | Description | Type name | Type | Default |
|---|---|---|---|---|---|
invalid | invalid | Invalid field state (visual on host + control chrome); also mirrored to slotted custom controls that expose an `invalid` boolean (e.g. `duo-file-input`, `duo-otp-input`) | boolean | boolean | false |
disabled | disabled | Disables direct-child native controls and restores their prior `disabled` state; also mirrored to slotted custom controls that expose `disabled` (same restore rules) | boolean | boolean | false |
required | required | Marks the primary text-like control required; clearing restores its prior required state | boolean | boolean | false |
Slots
| Name | Description |
|---|---|
default | Strict ordered direct children (label, control, hint/error); see form guidelines. |
Usage
<duo-field> composes layout and styling around native input, textarea, select, checkbox, and radio elements in the light DOM. It does not replace those controls.
Full markup contracts, helper/error text, and checkbox order are in the Form guidelines.
Quick reference
| Field type | Child order |
|---|---|
Text-like (input, textarea, select) | label → control → optional p / small |
| Checkbox / radio | input → label → optional p / small |
Use plain <p> or <small> for hints and errors — avoid custom hint classes.
Host attributes: invalid, disabled, required — see properties below and Form guidelines.