# <aihio-field>

Form field wrapper that lays out a label, control, description, and error message, and wires the accessibility relationships between them.

Intents: `form-field`, `layout`, `labeling`.

## Attributes

- `error` (boolean): Reflected automatically when slot="error" has content. Authors write the message; the field sets the state. Default: `false`.

## Slots

- `label`: The field label. Use a <label> element to also get click-to-focus.
- `default`: The control itself, normally aihio-input or aihio-combobox.
- `description`: Supporting hint shown under the control, hidden while an error is showing.
- `error`: Validation message. Its presence puts the field into its error state.

## Accessibility obligations

- (error, field-label) When the field has no slot="label" content: Provide slot="label" content, or an aria-label on the control. aihio-field wires a label but cannot invent one.
- (error, field-error-message) When the error attribute is written on the field: Write the message in slot="error" and leave the attribute to the field, which sets it from that content. An error attribute with no message marks the field invalid with nothing to announce.

## Examples

### With a description

```html
<aihio-field>
  <label slot="label">Email</label>
  <aihio-input type="email" name="email" required></aihio-input>
  <span slot="description">Use your work address.</span>
</aihio-field>
```

### With an error

Content in slot="error" puts the field in its error state and is announced with it.

```html
<aihio-field>
  <label slot="label">Password</label>
  <aihio-input type="password" name="password"></aihio-input>
  <span slot="error">Password must include at least 12 characters and one symbol.</span>
</aihio-field>
```

## Mistakes

### No slot="label", so the control is still unnamed. aihio-field wires a label, it does not invent one.

Don't (aihio lint: field-label):

```html
<aihio-field>
  <aihio-input name="email"></aihio-input>
</aihio-field>
```

Do:

```html
<aihio-field>
  <label slot="label">Email</label>
  <aihio-input name="email"></aihio-input>
</aihio-field>
```

### The error attribute is set by the component from slot="error" content. Writing it by hand with no message leaves nothing to announce.

Don't (aihio lint: field-error-message):

```html
<aihio-field error>
  <span slot="label">Email</span>
  <aihio-input name="email"></aihio-input>
</aihio-field>
```

Do:

```html
<aihio-field>
  <span slot="label">Email</span>
  <aihio-input name="email"></aihio-input>
  <span slot="error">Enter an email address.</span>
</aihio-field>
```