Actual CSS

Controls

Native-only control chrome: the file input and color picker mostly defeat custom styling, so the framework stays out of the way and keeps them readable and theme-aware.

Color

Small, theme-aware chrome for the native color picker.

Use .color on an input[type="color"] to give the native picker a control-sized box with the framework's border, radius, surface, disabled, and focus styles. The color dialog and selected-color swatch remain browser-native.

<label class="field">
  <span class="field-label">Accent color</span>
  <input class="color" type="color" value="#6d5dfc" />
</label>

File

Use .file on an input[type="file"] to keep the field native while theming the picker button with the framework's surface, border, radius, and hover states. The filename area stays muted.

<label class="field">
  <span class="field-label">Profile picture</span>
  <input class="file" type="file" accept="image/*" aria-describedby="file-help" />
  <span class="field-help" id="file-help">JPG, PNG or WebP — max 2 MB</span>
</label>
Actual CSS

Search documentation