Field

A label, a text input or select, and a message underneath. On a wrong answer the box shakes and the message turns into the error, then it clears after 3 seconds.

Markup

<div class="ob-field">
  <label class="ob-field-label" for="pw">Password</label>
  <div class="ob-input">
    <input id="pw" type="password" aria-describedby="pw-error">
  </div>
  <p class="ob-field-message ob-field-message--error" id="pw-error">Not that one.</p>
</div>

<div class="ob-field">
  <label class="ob-field-label" for="clocks">Clocks</label>
  <div class="ob-select"><select id="clocks">…</select></div>
</div>

Behaviour

import { shakeField } from "obvious/behaviours";

shakeField(fieldEl); // on a wrong answer

Notes

Add .is-invalid to the field yourself if you'd rather it stayed red until fixed. The error colour is --ob-field-error, the theme's danger by default.

CSS

@import "obvious/css/components/field.css";

Knobs

Set any of these on the component, or an ancestor, to change it.

Property	Default
`--ob-field-error`	var(--ds-color-danger)
`--ob-field-height`	var(--ds-control-height-lg)
`--ob-field-hold`	3000ms