File Input

Styled wrapper around a native file input, with a themed file-selector button for consistent cross-browser styling.

Overview

<FileInput> wraps <input type="file"> with the same .form-input styling as <TextInput>, including a themed file-selector button.

Default file input

import { FileInput, FormLabel } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <FormLabel htmlFor="formFile">Default file input</FormLabel>
      <FileInput id="formFile" />
    </>
  )
}

Multiple files

Add the multiple boolean attribute to allow selecting more than one file.

Multiple files input

import { FileInput, FormLabel } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <FormLabel htmlFor="formFileMultiple">Multiple files input</FormLabel>
      <FileInput id="formFileMultiple" multiple />
    </>
  )
}

Disabled

Add the disabled boolean attribute to give the input a grayed-out appearance and remove pointer events.

Disabled file input

import { FileInput, FormLabel } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <FormLabel htmlFor="formFileDisabled">Disabled file input</FormLabel>
      <FileInput id="formFileDisabled" disabled />
    </>
  )
}

Sizing

Set size to "sm" or "lg" to change the size of the input and its file-selector button.

Small file inputLarge file input

import { FileInput, FormLabel } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <FormLabel htmlFor="formFileSm">Small file input</FormLabel>
      <FileInput id="formFileSm" size="sm" className="mb-md" />
      <FormLabel htmlFor="formFileLg">Large file input</FormLabel>
      <FileInput id="formFileLg" size="lg" />
    </>
  )
}

API

FileInput

Prop	Type	Default
`className?`	`string`	—
A string of all className you want applied to the component.
`disabled?`	`boolean`	—
Toggle the disabled state for the component.
`help?`	`ReactNode`	—
A description for the field, rendered below the input.
`invalid?`	`boolean`	—
Set component validation state to invalid. Left unset, the component shows as invalid by itself from a submit it held back (an empty `required` one, say) until it no longer would, or its form is reset. Set it, to `false` too, and it alone decides.
`invalidFeedback?`	`ReactNode`	—
An error message for the field, rendered below the input when `invalid` is set, and after a submit the field held back, until it no longer would.
`label?`	`ReactNode`	—
The field's caption, rendered as a `FormLabel` associated with this input.
`multiple?`	`boolean`	—
Allows selecting more than one file.
`onChange?`	`ChangeEventHandler<HTMLInputElement>`	—
Method called when the selected file(s) change.
`size?`	`"sm" \| "lg"`	—
Size the component sm or lg.
`valid?`	`boolean`	—
Set component validation state to valid.
`validFeedback?`	`ReactNode`	—
A success message for the field, rendered below the input when `valid` is set.