File Input

A styled file picker. Built on native <input type="file"> with custom ::file-selector-button styling.

Component Skill — components/file-input/component-skill.md

Native basis

<input type="file"> element with custom ::file-selector-button styling.

Web Platform APIs

<input type="file"> ::file-selector-button

Classes

.file-input

Notes

• Reuses the .input styling pattern for consistency.

• The ::file-selector-button is styled as a muted button with hover effect.

• The existing .input[type="file"] already covers this — the file-input component provides a standalone class.

Default

Single file selection.

Picture

<input class="file-input" type="file" id="avatar">

Multiple files

Documents

<input class="file-input" type="file" multiple>

Accept filter

Image only

<input class="file-input" type="file" accept="image/*">

CSS view file

/* -- File Input component --------------------------------------- */

@layer components {
  .file-input {
    width: 100%;
    height: 2.5rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 150ms, box-shadow 150ms;
    padding: 0;
    cursor: pointer;

    &::file-selector-button {
      height: 100%;
      border: none;
      border-right: 1px solid var(--input);
      background: var(--muted);
      color: var(--foreground);
      font-size: 0.875rem;
      font-weight: 500;
      font-family: var(--font-sans);
      padding: 0 0.75rem;
      margin-right: 0.75rem;
      cursor: pointer;
      transition: background 150ms;

      &:hover { background: var(--accent); }
    }

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}