# Field parts

What wraps a control: the label, the hint, the error and the group.

### Label, hint and error
The text that names a control, says what it needs and says what went wrong.

```html
<div class="luz-field">
  <label class="luz-field__label luz-field__label--required" for="slug">Slug</label>
  <input class="luz-input luz-input--error" id="slug" type="text" required aria-invalid="true" aria-describedby="slug-hint slug-error">
  <div class="luz-field__helper" id="slug-hint">Letters, numbers and dashes.</div>
  <div class="luz-field__error" id="slug-error"><span class="u-sr-only">Error: </span>Use letters, numbers and dashes only.</div>
</div>
```

### Fieldset
A bordered group of related controls, named by its legend.

```html
<fieldset class="luz-fieldset">
  <legend>Shipping address</legend>
  <div class="luz-field">
    <label class="luz-field__label" for="street">Street</label>
    <input class="luz-input" id="street" type="text">
  </div>
  <div class="luz-field">
    <label class="luz-field__label" for="city">City</label>
    <input class="luz-input" id="city" type="text">
  </div>
</fieldset>
```

### Known issues
None known.