Text & input patterns

Components/Text & input patterns

InputGroup

A text field with a visual prefix and a real label.

Live preview

Website address

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-field">
  <label class="sl-label" for="ref-group">Website address</label>
  <div class="sl-input-group">
    <span aria-hidden="true">https://</span
    ><input class="sl-input" id="ref-group" placeholder="example.com" />
  </div>
</div>

HTML source · enable JavaScript for the playground7 lines · UTF-8

InputOTP

One accessible input supports typing, selection and pasting a complete code. Verification belongs to your application.

Live preview

Six-digit verification code

Use the sample code only; nothing is verified or sent.

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-field">
  <label class="sl-label" for="ref-otp">Six-digit verification code</label
  ><input
    class="sl-input sl-otp"
    id="ref-otp"
    type="text"
    inputmode="numeric"
    autocomplete="one-time-code"
    pattern="[0-9]{6}"
    maxlength="6"
    placeholder="000000"
  />
  <p class="sl-help">Use the sample code only; nothing is verified or sent.</p>
</div>

HTML source · enable JavaScript for the playground14 lines · UTF-8

NumberField

Native number editing, arrow keys and min/max constraints.

Live preview

Number of seats

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-field">
  <label class="sl-label" for="ref-number">Number of seats</label
  ><input
    class="sl-input"
    id="ref-number"
    type="number"
    min="1"
    max="25"
    step="1"
    value="3"
  />
</div>

HTML source · enable JavaScript for the playground12 lines · UTF-8

SearchField

A native search input. Wire result filtering through your application.

Live preview

Search example

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-field">
  <label class="sl-label" for="ref-search">Search example</label
  ><input
    class="sl-input"
    type="search"
    id="ref-search"
    placeholder="Search components…"
  />
</div>

HTML source · enable JavaScript for the playground9 lines · UTF-8

TextField

A labelled native text field.

Live preview

Project name

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-field">
  <label class="sl-label" for="ref-text">Project name</label
  ><input class="sl-input" id="ref-text" placeholder="My project" />
</div>

HTML source · enable JavaScript for the playground4 lines · UTF-8

TextArea

A resizable native multiline field.

Live preview

Project description

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-field">
  <label class="sl-label" for="ref-textarea">Project description</label
  ><textarea
    class="sl-input"
    id="ref-textarea"
    rows="4"
    placeholder="Describe your idea…"
  ></textarea>
</div>

HTML source · enable JavaScript for the playground9 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.