Skip to content
Teasim
TeaCSS documentation
StyleSheet

File Input

A native file picker and an optional dropzone presentation.

A native file picker and an optional dropzone presentation. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

  • file-input, dropzone, dropzone-input, dropzone-content, dropzone-selection

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

html
<label for="attachment">Attach a document</label>
<input id="attachment" class="file-input" name="attachment" type="file" accept=".pdf">

<label class="dropzone">
  <input class="dropzone-input" type="file" accept=".pdf">
  <span class="dropzone-content">
    Drop a PDF here or choose one
    <span class="dropzone-selection" aria-hidden="true">No file selected</span>
  </span>
</label>

Variants and composition

file-input styles the native selector button. For a drop target, use dropzone with a direct dropzone-input and visible dropzone-content; dropzone-selection can report the current filename.

Behavior and accessibility

The native file input owns file selection, accepted types, focus, and disabled state. A dropzone’s invisible input keeps pointer ownership; validate files in application code.

Reference

See the interactive Storybook specimen. Continue to Filter or return to the Official preset overview.