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 enhances the default file input by integrating with the Form and Fieldset components, ensuring consistent styling and behavior across different form inputs. It allows customization of size, shape, and appearance while maintaining accessibility and usability.

Example

The FileInput component can be used within a form or a fieldset to inherit global styles and behaviors, ensuring uniformity across file inputs. 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.

Size

The size prop determines the overall size of the FileInput component. It affects the padding and dimensions of the input field, ensuring consistency with other form elements. 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", "full", "none".

By default, the FileInput inherits the rounded value from the Fieldset or Form, ensuring a uniform look.

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. You can modify the container, label, and input field styles using the following props:

  • labelClasses – Custom styles for the FileInput. If used within a Form component, it inherits the Form's 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