Forms

The input= attribute styles form controls. Wrap inputs in a field element to compose labels, hints, and validation states automatically.

Text input

<input input placeholder="Enter a value…" />

Textarea

<textarea input="textarea" placeholder="Write something longer…"></textarea>

Select

<select input="select">
  <option>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
</select>

Range

<input input="range" type="range" value="60" />

Checkbox & Radio

Checked checkbox

Unchecked checkbox

Option A (selected)

Option B

<!-- Checkbox -->
<input input="checkbox" type="checkbox" id="c1" checked />
<label for="c1">Accept terms</label>

<!-- Radio -->
<input input="radio" type="radio" name="plan" id="r1" checked />
<label for="r1">Starter</label>

<input input="radio" type="radio" name="plan" id="r2" />
<label for="r2">Pro</label>

Field wrapper

Wrap inputs in a field element to get automatic label/hint spacing and validation state styling.

field + hint

Email address We'll never share your email.

<div field>
  <label>Email address</label>
  <input input placeholder="you@example.com" />
  <span hint>We'll never share your email.</span>
</div>

field state="error"

Add state="error" to the field wrapper to apply error color to the label, hint, and border.

Password Must be at least 8 characters.

<div field state="error">
  <label>Password</label>
  <input input type="password" value="short" />
  <span hint>Must be at least 8 characters.</span>
</div>

field state="success"

Username Username is available!

<div field state="success">
  <label>Username</label>
  <input input value="fyunusa" />
  <span hint>Username is available!</span>
</div>

Full form example

<form layout="stack" gap="md" surface="matte" density="spacious" radius="xl" style="max-width: 400px;">
  <h2 text="subheading">Sign in</h2>

  <div field>
    <label>Email</label>
    <input input type="email" placeholder="you@example.com" />
  </div>

  <div field>
    <label>Password</label>
    <input input type="password" placeholder="••••••••" />
    <span hint>Forgot your password?</span>
  </div>

  <button surface="solid" tone="primary" density="default" radius="md" motion="expressive">
    Sign in
  </button>
</form>