# Duration picker · MIAN

Hours, minutes and seconds as three small fields that move on as you type.

- Id: `duration-picker` · Category: Forms · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/duration-picker
- Use for: duration input, hours minutes seconds, timer length, time span.
- Alternatives: number-input, time-slots.

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">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-duration`: The group. Add data-mn-duration.
- `mn-duration-part`: One field with its label under it.
- `data-unit`: On each input: h, m or s.
- `mn-duration-sep`: The colon between parts.

## Accessibility

- Each part is a labelled number input with its own range.
- Put the group in a <fieldset> with a <legend> that says what the duration is for.
- Typing two digits moves to the next part; arrow keys step the value.
- Listen for mn:change; detail has seconds and text.

## Examples

### Timer

```html
<fieldset class="mn-fieldset" style="border:0;padding:0;margin:0"><legend class="mn-label" style="margin-bottom:.5rem">Simmer for</legend>
  <div class="mn-duration" data-mn-duration>
    <div class="mn-duration-part"><input id="du-h" type="number" min="0" max="23" value="0" data-unit="h"><label for="du-h">Hours</label></div><span class="mn-duration-sep" aria-hidden="true">:</span>
    <div class="mn-duration-part"><input id="du-m" type="number" min="0" max="59" value="18" data-unit="m"><label for="du-m">Minutes</label></div><span class="mn-duration-sep" aria-hidden="true">:</span>
    <div class="mn-duration-part"><input id="du-s" type="number" min="0" max="59" value="30" data-unit="s"><label for="du-s">Seconds</label></div>
  </div></fieldset>
```

## Source

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