Components / Forms / FileInput — Carla Design System

Main navigation
Intro
OverviewGetting StartedConfiguration
Design Language
ValuesPrinciplesColorsTypographyIconsIllustrations
Guides
StylingThemingLayoutForms
Components
Core
ClickElIconButtonLabelText
Layout
BoxGridSpacer
Actions
ActionButtonActionLinkFloatingActionButton
Forms
CheckboxCheckboxCardFileInputNumberInputRadioRadioCardRadioGroupSelectInputSliderSmallCardSortingSelectorTextAreaTextInput
Disclosure
AccordionCarouselModalOverlayVisuallyHidden
Data Display
BadgeCardInfoMessageTag
Feedback
LoadingLoadingBar
Media
LogoIconsIllustrations
Formatting
CurrencyDateTimeDistance
Hooks
useBreakpointuseFielduseFormuseScrollBlockingOverlayuseStorageuseClickAway
Utilities
formatCurrencyformatDateTimeformatDistance
Components / Forms / FileInput
FileInputA general purpose file input field.
PropsName
Type
Default
Description
onChange*
func
The change event handler.
name*
string
A unique semantic name that is connected to the label.
description
string
Additional description information display beneath the input.
disabled
bool
Sets disabled.
errorMessage
string
An error message text that is displayed once isValid is false.
isValid
bool
Sets the validation state.
label
string
The label text.
loading
bool
Whether the input is loading
multiple
bool
Whether the input supports multiple files
onBlur
func
The bur event handler.
onFocus
func
The focus event handler.
required
bool
Sets required.
value
string
The controlled value.
Examples
Dark Mode
Open in Playroom
<FileInput name="firstname" label="First Name" /><FileInput name="firstname" label="First Name" />
Description & Error Message
Dark Mode
Open in Playroom
<FileInput
  name="firstname-invalid"
  label="First Name"
  description="Your firstname please"
  isValid={false}
  errorMessage="You have to enter a name."
/><FileInput
  name="firstname-invalid"
  label="First Name"
  description="Your firstname please"
  isValid={false}
  errorMessage="You have to enter a name."
/>
Disabled
Dark Mode
Open in Playroom
<FileInput
  disabled
  name="firstname-disabled"
  label="First Name"
  description="Your firstname please"
/><FileInput
  disabled
  name="firstname-disabled"
  label="First Name"
  description="Your firstname please"
/>
Loading
Dark Mode
Open in Playroom
<FileInput
  loading
  name="firstname-disabled"
  label="First Name"
  description="Your firstname please"
/><FileInput
  loading
  name="firstname-disabled"
  label="First Name"
  description="Your firstname please"
/>
Table of Contents
Props
Examples
Description & Error Message
Disabled
Loading