# disabled

The markup of every demo on <https://kuiper.oeds.it/disabled/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## default

The component with no options set -- what the markup alone gives you, before any parameter is tuned. Read this one first: every other panel on the page is a departure from it.

Varies: the `disabled` state.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card text-center"><p><button class="button button-action" disabled>[disabled]</button></p><p class="text-xs text-muted">the disabled attribute</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card text-center"><p><button class="button button-action disabled">.disabled</button></p><p class="text-xs text-muted">the .disabled class</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card text-center"><fieldset disabled><legend class="text-xs">fieldset</legend><p><button class="button button-action">:disabled</button></p></fieldset><p class="text-xs text-muted">inherited from fieldset[disabled]</p></div></div>
</div>
```

## controls

Varies: 12 field kinds (`checkbox`, `color`, `date`, `file`, `number`, `radio`, …).

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><button class="button button-action" disabled>button</button></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><label for="text">text</label><input id="text" name="text" type="text" value="input" disabled></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><label for="select">select</label><select id="select" name="select" disabled><option>select</option></select></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><label class="input-label"><input type="checkbox" disabled> checkbox</label></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><label class="input-label"><input type="radio" disabled> radio</label></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><label for="range">range</label><input id="range" name="range" type="range" min="0" max="100" value="50" disabled></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><label for="number">number</label><input id="number" name="number" type="number" value="1" disabled></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><label for="file">file</label><input id="file" name="file" type="file" disabled></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><label for="color">color</label><input id="color" name="color" type="color" value="#7979ae" disabled></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><label for="date">date</label><input id="date" name="date" type="date" disabled></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><progress value="50" max="100" class="disabled"></progress></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="26" high="51" optimum="76" value="50" class="disabled"></meter></div></div>
 <div class="width-1-1"><div class="card"><label for="textarea">textarea</label><textarea id="textarea" name="textarea" rows="1" disabled>textarea</textarea></div></div>
</div>
```

## card

Varies: the `disabled` state.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card disabled"><div class="card-header"><div class="card card-title"><h3>header</h3></div></div><div class="card-body"><p>A disabled card keeps its border where every other disabled element loses it.</p></div><div class="card-footer"><p class="text-xs">footer</p></div></div><p class="text-xs text-muted">.card.disabled</p></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card card-white disabled"><div class="card-header"><div class="card card-title"><h3>header</h3></div></div><div class="card-body"><p>A disabled card keeps its border where every other disabled element loses it.</p></div><div class="card-footer"><p class="text-xs">footer</p></div></div><p class="text-xs text-muted">.card.card-white.disabled</p></div>
</div>
```