Components / Forms / TextInput — Carla Design System

Main navigation
Intro
OverviewGetting StartedConfiguration
Design Language
ValuesPrinciplesColorsTypographyIconsIllustrations
Guides
StylingThemingLayout
Components
Core
ClickElIconButtonLabelText
Layout
BoxGridSpacer
Actions
ActionButtonActionLinkFloatingActionButton
Forms
CheckboxCheckboxCardFileInputNumberInputRadioRadioCardRadioGroupSelectInputSliderSmallCardSortingSelectorTextAreaTextInput
Disclosure
AccordionCarouselModalOverlayVisuallyHidden
Data Display
BadgeCardInfoMessageTag
Feedback
LoadingLoadingBar
Media
LogoIconsIllustrations
Components / Forms / TextInput
TextInputA general purpose text input field that is used with controlled state manangement.
API ReferenceProp
Type
Default
Description
onChange
React.ChangeEventHandler<HTMLInputElement>
name
string
data-test
string
description
string
disabled
boolean
false
errorMessage
string
id
string
inputMode
'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
inputRef
React.Ref<HTMLInputElement>
isEmpty
(value: string | number) => boolean
isValid
boolean
true
label
string
loading
boolean
mode
'compact'
onBlur
React.FocusEventHandler<HTMLInputElement>
onClear
React.MouseEventHandler<Element>
onFocus
React.FocusEventHandler<HTMLInputElement>
placeholder
string
required
boolean
false
suffix
string
type
'text' | 'number' | 'tel' | 'search' | 'email' | 'password' | 'date' | 'datetime-local' | 'week'
text
value
string | number
ExamplesDefault
Dark Mode
function Example() {
  const [value, setValue] = React.useState('')

  return (
    <TextInput
      name="firstname"
      label="First Name"
      placeholder="e.g. Max"
      value={value}
      onChange={(event) => setValue(event.target.value)}
    />
  )
}
NumberThere are no native html arrows and it blurs when it's focused and user scrolls
Dark Mode
function Example() {
  const [value, setValue] = React.useState('')

  return (
    <TextInput
      name="age"
      label="Age"
      type="number"
      value={value}
      onChange={(event) => setValue(event.target.value)}
    />
  )
}
Search
Dark Mode
function Example() {
  const [value, setValue] = React.useState('')

  return (
    <TextInput
      name="search-field"
      label="Search"
      type="search"
      value={value}
      onChange={(event) => setValue(event.target.value)}
      onClear={() => setValue('')}
    />
  )
}
Date
Dark Mode
function Example() {
  const [value, setValue] = React.useState('')

  return (
    <TextInput
      name="date"
      label="Date"
      type="datetime-local"
      value={value}
      onChange={(event) => setValue(event.target.value)}
    />
  )
}
Description & Error Message
Dark Mode
Open in Playroom
<TextInput
  name="firstname-invalid"
  label="First Name"
  description="Your firstname please"
  isValid={false}
  errorMessage="You have to enter a name."
  placeholder="e.g., Max"
  onChange={() => null}
/>
Disabled
Dark Mode
Open in Playroom
<TextInput
  disabled
  name="firstname-disabled"
  label="First Name"
  value="foo"
  description="Your firstname please"
  placeholder="e.g., Max"
  onChange={() => null}
/>
Loading
Dark Mode
Open in Playroom
<TextInput
  loading
  name="firstname-loading"
  label="First Name"
  description="Your firstname please"
  placeholder="e.g., Max"
  onChange={() => null}
/>
Suffix
Dark Mode
Open in Playroom
<Box space={2}>
  <TextInput
    name="amount-suffix"
    label="Amount"
    suffix="SEK"
    type="number"
    onChange={() => null}
  />
  <TextInput
    name="distance-suffix"
    label="Distance"
    suffix="km"
    loading
    type="number"
    onChange={() => null}
  />
</Box>
Unlabelled
Dark Mode
function Example() {
  const [value, setValue] = React.useState('')

  return (
    <TextInput
      name="city"
      placeholder="e.g. Stockholm"
      value={value}
      onChange={(event) => setValue(event.target.value)}
    />
  )
}
Compact Mode
Dark Mode
function Example() {
  const [value, setValue] = React.useState('')

  return (
    <Box space={2}>
      <TextInput
        name="name"
        mode="compact"
        label="Name"
        placeholder="Max Mustermann"
        value={value}
        onChange={(event) => setValue(event.target.value)}
      />
      <TextInput
        name="compact-unlabelled"
        mode="compact"
        placeholder="Unlabelled"
        onChange={() => null}
      />
      <TextInput
        name="compact-loading"
        mode="compact"
        placeholder="Unlabelled"
        loading
        onChange={() => null}
      />
      <TextInput
        name="compact-disabled"
        mode="compact"
        placeholder="Unlabelled"
        label="Compact disabled"
        disabled
        onChange={() => null}
      />
      <TextInput
        name="compact-suffix"
        mode="compact"
        label="Compact with suffix"
        suffix="km"
        onChange={() => null}
      />
    </Box>
  )
}
Table of Contents
API Reference
Examples
Default
Number
Search
Date
Description & Error Message
Disabled
Loading
Suffix
Unlabelled
Compact Mode

Prop	Type	Default
onChange	React.ChangeEventHandler<HTMLInputElement>
name	string
data-test	string
description	string
disabled	boolean	false
errorMessage	string
id	string
inputMode	'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'
inputRef	React.Ref<HTMLInputElement>
isEmpty	(value: string \| number) => boolean
isValid	boolean	true
label	string
loading	boolean
mode	'compact'
onBlur	React.FocusEventHandler<HTMLInputElement>
onClear	React.MouseEventHandler<Element>
onFocus	React.FocusEventHandler<HTMLInputElement>
placeholder	string
required	boolean	false
suffix	string
type	'text' \| 'number' \| 'tel' \| 'search' \| 'email' \| 'password' \| 'date' \| 'datetime-local' \| 'week'	text
value	string \| number