# Field · MIAN

Label, control, hint and error message wired together, plus form and fieldset layout.

- Id: `field` · Category: Forms · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/field
- Use for: form field, label and hint, form layout, validation error, fieldset.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-field`: Stacks a label, a control and its messages.
- `mn-label · mn-req`: Label · required marker.
- `mn-hint · mn-error`: Help text · error text. Link them with aria-describedby.
- `mn-form · mn-form-row`: Vertical form rhythm · responsive multi-column row.
- `mn-fieldset`: Groups related controls under a legend.

## Accessibility

- Always pair a label with its control using for/id.
- Point aria-describedby at the hint and the error; set aria-invalid="true" when invalid.
- The required marker is visual, also set the required attribute on the control.

## Examples

### Label, hint and error

```html
<form class="mn-form" style="max-width:26rem" novalidate>
  <div class="mn-field">
    <label class="mn-label" for="f-email">Email<span class="mn-req" aria-hidden="true">*</span></label>
    <input class="mn-input" id="f-email" type="email" required placeholder="you@company.com" aria-describedby="f-email-hint">
    <p class="mn-hint" id="f-email-hint">We'll never share it.</p>
  </div>
  <div class="mn-field">
    <label class="mn-label" for="f-user">Username</label>
    <input class="mn-input" id="f-user" value="ad" aria-invalid="true" aria-describedby="f-user-err">
    <p class="mn-error" id="f-user-err">Must be at least 3 characters.</p>
  </div>
</form>
```

### Form layout

```html
<form class="mn-form" style="max-width:34rem">
  <div class="mn-form-row">
    <div class="mn-field"><label class="mn-label" for="f-first">First name</label><input class="mn-input" id="f-first" autocomplete="given-name"></div>
    <div class="mn-field"><label class="mn-label" for="f-last">Last name</label><input class="mn-input" id="f-last" autocomplete="family-name"></div>
  </div>
  <fieldset class="mn-fieldset">
    <legend>Notifications</legend>
    <label class="mn-check"><input class="mn-checkbox" type="checkbox" checked> Product updates</label>
    <label class="mn-check"><input class="mn-checkbox" type="checkbox"> Weekly digest</label>
  </fieldset>
  <div class="mn-row"><button class="mn-btn" type="submit">Save</button><button class="mn-btn mn-btn-ghost" type="reset">Cancel</button></div>
</form>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/field/source