Displays an input
| 1 |
<input placeholder="Type something" /> |
Import
@import '@webtui/css/components/input.css';
Usage
<input />
Examples
Sizing
| 1 |
|
| 2 |
<input size-="small" placeholder="Small" /> |
| 3 |
<input placeholder="Default" /> |
| 4 |
<input size-="large" placeholder="Large" /> |
| 5 |
|
| 1 |
|
| 2 |
body { |
| 3 |
display: flex; |
| 4 |
flex-direction: column; |
| 5 |
gap: 1lh; |
| 6 |
} |
| 7 |
|
Box Borders
The box- utility cannot be used directly on <input> elements because inputs don’t support pseudo-elements
Instead, wrap an <input> with a <label box-="*"> or use a contenteditable element
| 1 |
<label box-="round" shear-="top"> |
| 2 |
<div clas="row"> |
| 3 |
<span is-="badge" variant-="background0">Username</span> |
| 4 |
</div> |
| 5 |
<input placeholder="johndoe123" /> |
| 6 |
</label> |
| 7 |
<div contenteditable box-="round"> |
| 8 |
content editable div |
| 9 |
</div> |
| 1 |
|
| 2 |
input { |
| 3 |
background-color: var(--background0); |
| 4 |
} |
| 5 |
body { |
| 6 |
display: flex; |
| 7 |
flex-direction: column; |
| 8 |
gap: 1lh; |
| 9 |
} |
| 10 |
.row { |
| 11 |
display: flex; |
| 12 |
} |
| 13 |
|
Reference
Extending
To extend the Input stylesheet, define a CSS rule on the components layer
@layer components {
input,
[is-~='input'] {
&[size-='thicc'] {
height: 3lh;
padding: 1lh 8ch;
}
/* ... */
}
}
Scope
- All elements with the
is-~="input" selector
- All
<input> elements that are not of type button, submit, reset, checkbox, or radio
input,
[is-~='input'] {
/* ... */
}