Input stable
The text input and its variations.
Default
<label class="textbox">
<div class="textbox__label">Input</div>
<input type="text" class="textbox__input" placeholder="Placeholder">
</label>
1
2
3
4
2
3
4
Floated
<label class="textbox textbox--floated">
<div class="textbox__label">Floated label active</div>
<input type="text" class="textbox__input" placeholder="Type here...">
</label>
1
2
3
4
2
3
4
Disabled
<label class="textbox">
<div class="textbox__label">Input</div>
<input disabled type="text" class="textbox__input" placeholder="Placeholder">
</label>
1
2
3
4
2
3
4
Readonly
<label class="textbox">
<div class="textbox__label">Input</div>
<input readonly type="text" class="textbox__input" placeholder="Placeholder">
</label>
1
2
3
4
2
3
4
Wide
<label class="textbox textbox--wide">
<div class="textbox__label">Input</div>
<input type="text" class="textbox__input" placeholder="Placeholder">
</label>
1
2
3
4
2
3
4
Error
<label class="textbox textbox--error">
<div class="textbox__label">Input</div>
<input type="text" class="textbox__input" placeholder="Placeholder">
</label>
1
2
3
4
2
3
4