File Picker

Let users select files from their OS file system for upload.

File

Use the [type="file"] attribute to turn an <input> element into a file picker.

Choose a File

<label for="file">Choose a File</label>
<input type="file" id="file" name="file">

Button Styles

The upload button is a pseudo-element created by the browser.

You can style it using any of the button style options by applying the desired utility classes directly to the <input> element.

<!-- A small, vivid button in the secondary color -->
<label for="file">
<input 
	class="size-2xs vivid secondary"
	type="file"
	id="file"
	name="file"
>