Input

Displays an input

<input placeholder="Type something" />

Import

@import "@webtui/css/components/input.css";

Usage

<input />

Examples

Sizing

<input size-="small" placeholder="Small" />
<input placeholder="Default" />
<input size-="large" placeholder="Large" />

body {
  display: flex;
  flex-direction: column;
  gap: 1lh;
}

Box Borders

The box- utility cannot be used directly on an <input> element because inputs don’t support pseudo-elements

Instead, wrap an <input> with a <label box-="*"> or use a contenteditable element

<label box-="round contain:!top">
  <div clas="row">
      <span is-="badge" variant-="background0">Username</span>
  </div>
  <input placeholder="johndoe123" />
</label>
<div contenteditable box-="round">
  content editable div
</div>

input {
  background-color: var(--background0);
}
body {
  display: flex;
  flex-direction: column;
  gap: 1lh;
}
.row {
  display: flex;
}

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"] { /* ... */ }