FileInput

The FileInput component is a customizable wrapper for file selection, providing a more flexible and consistent way to handle file uploads in forms.

About

The FileInput component styles the native file input and reads its settings from the Form or Fieldset around it, so it matches the other fields. Size, shape and classes are all props.

Example

Put the FileInput inside a form or a fieldset and it picks up their settings. Here's a basic example:

Svelte 
<script>
  import { FileInput } from "theui-svelte";
</script>

<FileInput name="document">Upload</FileInput>

The name prop is mandatory for the FileInput component. It ensures the input field is properly recognized when submitting a form. Without a name, the uploaded file data will not be sent. The content inside the FileInput component will be display as a label.

Selected Files

The files prop holds the selected files as a FileList. It is bindable, so use bind:files to read what the user picked, for example to show the file names or upload them yourself. Add the native multiple attribute to allow more than one file, and accept to limit the file types.

Svelte 
<script>
  let files = $state();
</script>

<FileInput name="documents" bind:files multiple accept=".pdf,.docx">Upload</FileInput>

{#if files?.length}
  <ul>
    {#each Array.from(files) as file}
      <li>{file.name}</li>
    {/each}
  </ul>
{/if}

Size

The size prop sets the padding and the height of the field, on the same scale as the other form components. Available sizes: "sm", "md" (default), "lg" and "xl".

By default, the FileInput inherits the size from the nearest Fieldset or Form component. However, you can override it manually if needed.

Svelte 
<FileInput name="document" size="sm">Upload</FileInput>
<FileInput name="document" size="md">Upload</FileInput>
<FileInput name="document" size="lg">Upload</FileInput>
<FileInput name="document" size="xl">Upload</FileInput>

Variant

The variant prop controls the visual style of the FileInput, allowing you to adjust its appearance based on form design preferences. Available values: "bordered" (default) and "flat".

If the FileInput is inside a Fieldset or Form , it inherits the variant automatically unless explicitly set.

Svelte 
<FileInput name="document" variant="bordered">Upload</FileInput>
<FileInput name="document" variant="flat">Upload</FileInput>

Rounded

The rounded prop defines the border-radius of the FileInput, giving it different levels of rounded corners. Available values: "sm", "md" (default), "lg", "xl", "2xl", "full", "none". It applies to the input and its file button.

By default the FileInput takes its rounded value from the Fieldset or Form around it.

Svelte 
<FileInput name="document" rounded="none">Upload</FileInput>
<FileInput name="document" rounded="sm">Upload</FileInput>
<FileInput name="document" rounded="md">Upload</FileInput>
<FileInput name="document" rounded="lg">Upload</FileInput>
<FileInput name="document" rounded="xl">Upload</FileInput>
<FileInput name="document" rounded="full">Upload</FileInput>

Helper Text

The helperText prop allows you to add additional guidance or information below the file input field. This can be useful for providing instructions, specifying accepted file formats, or any other relevant details for the user. You can pass either a string or a Snippet as the helper text.

Accepted formats: PDF, DOCX. Max size: 5MB.
Svelte 
<FileInput name="document" helperText="Accepted formats: PDF, DOCX. Max size: 5MB.">Upload</FileInput>

Or using a Snippet for more flexibility:

Accepted formats: PDF, DOCX. Max size: 5MB.
Svelte 
<FileInput name="document">
  Upload
  {#snippet helperText()}
    Accepted formats: PDF, DOCX. Max size: 5MB.
  {/snippet}
</FileInput>

Customization

The FileInput component provides several ways to customize its appearance to match your design requirements. The size, variant, rounded and reset props are inherited from the nearest Fieldset or Form. You can modify the container, label, and input field styles using the following props:

  • labelClasses - Custom styles for the label of the FileInput. If used within a Fieldset or Form component, it inherits their labelClasses.
  • wrapperClasses - Additional classes for the wrapper <div>, useful for layout adjustments.
  • class - Apply custom styles to the file input itself.
Svelte 
<FileInput 
  name="document"
  wrapperClasses="flex-row items-center justify-between gap-8"
  labelClasses="text-xl font-semibold uppercase"
  class="focus:ring-2 focus-within:ring-purple-500 focus:ring-purple-500 bg-purple-100 file:bg-purple-300"
  variant="flat"
>
  Upload
</FileInput>

Accessibility

Uploading files should be simple - and accessible. Our File component pairs each file input with a clear, connected <label>, and uses aria-describedby to guide screen readers to any helpful hints or messages. It's a smooth, informative experience for all users, whether navigating with a mouse or a screen reader.

Configuration