Skip to main content Accessibility Feedback
Skip to Documentation Content

File Picker

New! This component was just added to Kelp. Enjoy!

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.

<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"
>