<aihio-field> v1.3.0 Markdown for agents

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

Examples

Each one rendered live, over the markup that produces it.

With a description

Use your work address.

<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.

Password

Password must include at least 12 characters and one symbol.

<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

Each one beside its fix, with what aihio lint says about it. The prompt fragment gives agents the same pairs, and the build fails if the linter stops catching one or a fix stops passing.

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

Don't

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

aihio lint reports

field-label error Provide slot="label" content, or an aria-label on the control. aihio-field wires a label but cannot invent one.

<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-field error>
  <span slot="label">Email</span>
  <aihio-input name="email"></aihio-input>
</aihio-field>

aihio lint reports

field-error-message error 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.

Enter an email address.

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

API

Every attribute, property, method, and event the schema declares for aihio-field.

Attributes

error: boolean default false; Reflected automatically when slot="error" has content. Authors write the message; the field sets the state.

Slots

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

Composition

Allowed slots: label default description error
Allowed children: aihio-input aihio-combobox aihio-switch label span p other HTML
Forbidden descendants: aihio-card aihio-dialog

Accessibility

What you have to provide, and what the component already does. The obligations with a rule are checked by aihio lint and by the dev build's console warnings.

Your obligations

error 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.

Checked as field-label
error 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.

Checked as field-error-message

Handled for you

Generates ids for the label, description, and error, and wires aria-labelledby and aria-describedby on the control
Sets for on native label content and delegates label clicks to the wrapped native control
Reflects the error state onto the control, which sets aria-invalid
Points aria-describedby at the error message while erroring, and at the description otherwise, so only the relevant text is announced
A switch field lays out as a row, the switch beside its label; a native <textarea> or <select> is drawn to match aihio-input

In patterns

Canonical compositions that use aihio-field.