File input component | Monsoon CSS

Example

Full

file-input.html

<div class="grid gap-3 max-w-sm">
  <input type="file" class="file-input" aria-label="Attachment">
  <input type="file" class="file-input file-input-primary file-input-sm" aria-label="Avatar">
</div>

Classes

7 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

Class	Type	What it does
	Base	Base class of the file input. On an <input> in the example. Sets border, text color, background, shadow, not-allowed cursor and opacity, and 9 custom properties. CSS `.file-input:hover::file-selector-button { background-color: var(--surface-3); } .file-input:focus-visible, .color-input:focus-visible { --_line: var(--tone); }`
	Modifier	Modifier, combined with the file-input class. On an <input> in the example. Sets text color, background and border. CSS `.file-input-primary:hover::file-selector-button { background-color: color-mix(in oklab, var(--primary) 88%, var(--foreground)); } .file-input-primary::file-selector-button { color: var(--primary-foreground); background-color: var(--primary); border-color: var(--primary); }`
	Size	Extra small size. Not used in the example above. Sets 4 custom properties. CSS `.input-xs, .select-xs, .textarea-xs, .file-input-xs, .input-group-xs { --field-h: var(--m-control-h-xs); --field-px: .5rem; --field-fs: var(--m-control-fs-xs); --field-radius: var(--m-radius-sm); }`
	Size	Small size. On an <input> in the example. Sets 4 custom properties. CSS `.input-sm, .select-sm, .textarea-sm, .file-input-sm, .input-group-sm, .color-input-sm { --field-h: var(--m-control-h-sm); --field-px: .625rem; --field-fs: var(--m-control-fs-sm); --field-radius: var(--m-radius-sm); }`
	Size	Medium, the default size. Not used in the example above. Sets 4 custom properties. CSS `.input-md, .select-md, .textarea-md, .file-input-md, .input-group-md { --field-h: var(--m-control-h-md); --field-px: .75rem; --field-fs: var(--m-control-fs-md); --field-radius: var(--m-radius-md); }`
	Size	Large size. Not used in the example above. Sets 4 custom properties. CSS `.input-lg, .select-lg, .textarea-lg, .file-input-lg, .input-group-lg, .color-input-lg { --field-h: var(--m-control-h-lg); --field-px: 1rem; --field-fs: var(--m-control-fs-lg); --field-radius: var(--m-radius-lg); }`
	Size	Extra large size. Not used in the example above. Sets 4 custom properties. CSS `.input-xl, .select-xl, .textarea-xl, .file-input-xl, .input-group-xl { --field-h: var(--m-control-h-xl); --field-px: 1.125rem; --field-fs: var(--m-control-fs-xl); --field-radius: var(--m-radius-xl); }`

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- File input: start from the base class, then add modifiers -->
<div class="grid gap-3 max-w-sm">
  <input type="file" class="file-input" aria-label="Attachment">
  <input type="file" class="file-input file-input-primary file-input-sm" aria-label="Avatar">
</div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

#Example

#Classes

#Usage

#Accessibility

#Related components

Example

Classes

Usage

Accessibility

Related components