Input Fields

Import input components from @volvo-cars/react-forms. All inputs share a common API for labels, validation, and hints. The default top-label variant places a static label above the input.

Full name

import { TextInput } from '@volvo-cars/react-forms';

export function TextInputBasic() {
  return <TextInput name="full-name" label="Full name" variant="top-label" />;
}

Variants

Floating label

Set variant="floating-label" for a label that animates from inside the input to above it on focus.

Full name

import { TextInput } from '@volvo-cars/react-forms';

export function TextInputFloatingLabel() {
  return (
    <TextInput name="full-name" label="Full name" variant="floating-label" />
  );
}

Input types

Each component maps to the appropriate HTML type, inputMode, and autoComplete attributes for browser validation and mobile keyboards.

Component	HTML type	Use case
TextInput	text	General text
EmailInput	email	Email addresses
PasswordInput	password / text	Passwords (with show/hide)
TelInput	tel	Phone numbers
UrlInput	url	URLs
DateInput	date	Date with calendar picker
CurrencyInput	text (numeric)	Monetary values with symbol
UnitInput	text (numeric)	Values with localised unit
TextArea	<textarea>	Multi-line text

Full name

Email address

Password

Phone number

import {
  EmailInput,
  PasswordInput,
  TelInput,
  TextInput,
} from '@volvo-cars/react-forms';

export function InputTypes() {
  return (
    <div className="flex-col gap-16">
      <TextInput name="full-name" label="Full name" variant="top-label" />
      <EmailInput name="email" label="Email address" variant="top-label" />
      <PasswordInput
        name="password"
        label="Password"
        showPasswordLabel="Show password"
        variant="top-label"
      />
      <TelInput name="phone" label="Phone number" variant="top-label" />
    </div>
  );
}

Expand code Collapse code

PasswordInput

Includes a built-in show/hide toggle. Pass showPasswordLabel to make the toggle accessible — without it, the button is hidden from assistive technology.

DateInput

Renders a native date picker with a calendar icon button. Use min and max to constrain the date range in yyyy-mm-dd format.

Start date

import { DateInput } from '@volvo-cars/react-forms';

export function DateInputExample() {
  return <DateInput name="start-date" label="Start date" variant="top-label" />;
}

CurrencyInput

Displays a locale-aware currency symbol as a prefix or suffix. Always uses top-label variant. Formatting follows the locale provided by LocaleProvider at the app root.

Price

€

import { CurrencyInput } from '@volvo-cars/react-forms';

export function CurrencyInputExample() {
  return <CurrencyInput name="price" label="Price" currency="EUR" />;
}

UnitInput

Displays a localised unit suffix. Always uses top-label variant. Set unitDisplay="long" for the full unit name. Formatting follows the locale provided by LocaleProvider at the app root.

Distance

km

import { UnitInput } from '@volvo-cars/react-forms';

export function UnitInputExample() {
  return <UnitInput name="distance" label="Distance" unit="kilometer" />;
}

TextArea

Multi-line text input for longer content like messages or feedback. Set rows to control the visible height. Supports both top-label and floating-label variants.

Message

import { TextArea } from '@volvo-cars/react-forms';

export function TextAreaBasic() {
  return (
    <TextArea name="message" label="Message" variant="top-label" rows={4} />
  );
}

Validation and hints

Use errorMessage to show an error and mark the input invalid. Use hint for supplementary guidance. Both render below the input and are linked via aria-describedby.

Email

Enter a valid email address

City

We use this to find dealers near you

import { TextInput } from '@volvo-cars/react-forms';

export function InputValidation() {
  return (
    <div className="flex-col gap-16">
      <TextInput
        name="email"
        label="Email"
        errorMessage="Enter a valid email address"
        variant="top-label"
      />
      <TextInput
        name="city"
        label="City"
        hint="We use this to find dealers near you"
        variant="top-label"
      />
    </div>
  );
}

Expand code Collapse code

Controlled and uncontrolled

By default inputs are uncontrolled — set defaultValue for an initial value. Pass value + onChange for controlled usage.

City

import { TextInput } from '@volvo-cars/react-forms';
import { useState } from 'react';

export function TextInputControlled() {
  const [value, setValue] = useState('');

  return (
    <TextInput
      name="city"
      label="City"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      variant="top-label"
    />
  );
}

Expand code Collapse code

Content slots

contentAfter injects an element (typically an Icon or IconButton) at the end of the input field. contentBefore does the same at the start but is only supported with variant="top-label".

PasswordInput, DateInput, CurrencyInput, and UnitInput use these slots internally — you don’t need to wire them yourself.

CSS-only usage

A <label> followed by an <input> without a class attribute is styled automatically when its type is text, email, password, tel, url, date, or datetime-local.

Full name

<label for="css-name" class="font-medium">Full name</label>
<input type="text" id="css-name" />

For the floating label pattern, wrap a <label> and <input> in a div.input-floating-label and set placeholder=" " (a space) to drive the CSS state.

Accessibility

Key consumer responsibilities from the WCAG audit:

• Label every input — the label prop is required and renders a <label> linked to the input. If you also use aria-labelledby, the component includes both references automatically.
• Error identification — errorMessage renders an error with an icon and links it to the input via aria-errormessage and aria-describedby. Errors are hidden when the input is disabled.
• Status messages — VoiceOver in Safari has known issues announcing error messages. Test with multiple screen readers.
• Password visibility — always pass showPasswordLabel on PasswordInput so the toggle button is announced. Without it the button is aria-hidden.
• Disabled inputs — use sparingly. Prefer showing validation messages and hints to explain why a field can’t be edited.

Props

TextInput

Prop	Type	Required	Default
pattern	string	-	-
Regular expression that the input value must match.
list	string	-	-
Id of a `<datalist>` element with a list of predefined values to suggest to the user.
size	number	-	-
Specifies the visible width, in characters, of the input.
minLength	number	-	-
Minimum length of the input value.
maxLength	number	-	-
Maximum length of the input value.
inputMode	"none" | "text" | "numeric" | "decimal"	-	-
Hint the browser about the appropriate virtual keyboard for the type of expected data.
autoCapitalize	"none" | "sentences" | "words" | "characters"	-	-
Controls whether and how text input is automatically capitalized as it is entered by the user.
autoCorrect	"off" | "on"	-	-
Controls whether the browser should automatically correct the text as it is being entered.
spellCheck	boolean	-	-
Controls whether the element may be checked for spelling errors.
autoComplete	"name" | "off" | "on" | "organization-title" | ...	-	-
What type of information to autocomplete in the input. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
contentBefore	ReactNode	-	-
Inject an element into the input field, displayed at the start of the input. Only supported with the `top-label` variant.
contentAfter	ReactNode	-	-
Inject an element into the input field, displayed at the end of the input.
defaultValue	string	-	-
Default value of an uncontrolled input.
value	string	-	-
Value of the input. Makes the input controlled.
onChange	ChangeEventHandler<HTMLInputElement, Element>	-	-
Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke).
variant	"top-label" | "floating-label"	-	top-label
name	string	✓	-
The name of the input to use when submitting the form.
placeholder	string	-	-
Placeholder text to show in the input when it is empty.
errorMessage	string	-	-
Set the error message of an input and mark it invalid.
aria-invalid	boolean	-	false
Force the input to be invalid.
hidden	boolean	-	-
id	string	-	-
title	string	-	-
dir	string	-	-
lang	string	-	-
slot	string	-	-
translate	"yes" | "no"	-	-
className	string	-	-
style	CSSProperties	-	-
tabIndex	number	-	-
onPointerDown	PointerEventHandler<Element>	-	-
onPointerEnter	PointerEventHandler<Element>	-	-
onPointerLeave	PointerEventHandler<Element>	-	-
onPointerMove	PointerEventHandler<Element>	-	-
onPointerUp	PointerEventHandler<Element>	-	-
label	string	✓	-
A concise label for the input, keep it below 40 characters. For a large form where only some options are required, add an asterisk (*) to the end of the label. If most fields in the form are required, add (optional) to the label.
disabled	boolean	-	false
Disables the input. Use sparingly as it can be non-obvious to users why an input has been disabled. Prefer showing validation messages and hints instead.
autoFocus	boolean	-	false
Gives the input focus on page load. Use sparingly as it can be confusing to screen-reader and mobile users.
readOnly	boolean	-	false
Makes the input read-only. Use sparingly, it's often preferred to present the data as regular text or in a table instead.
form	string	-	-
Id of a form element that this input should be associated with. Defaults to the containing form element.
hint	ReactNode	-	-
Additional hint or description.
enterKeyHint	"done" | "go" | "next" | "previous" | "search" ...	-	-
Hint the browser about what label to show for the Enter button on mobile keyboards.
required	boolean	-	false
Makes the input required.
aria-describedby	string	-	-
aria-labelledby	string	-	-
onInvalid	FormEventHandler<HTMLInputElement>	-	-
Fires if the input fails validation on form submit.
onFocus	FocusEventHandler<HTMLInputElement>	-	-
onBlur	FocusEventHandler<HTMLInputElement>	-	-
onKeyDown	KeyboardEventHandler<HTMLInputElement>	-	-
onKeyUp	KeyboardEventHandler<HTMLInputElement>	-	-

EmailInput

Prop	Type	Required	Default
multiple	boolean	-	-
Accept multiple comma-separated email addresses.
autoComplete	"off" | "email"	-	-
What type of information to autocomplete in the input.
minLength	number	-	-
Minimum length of the email address.
maxLength	number	-	-
Maximum length of the email address.
pattern	string	-	-
Regular expression that the email must match. Email pattern validation is already built into the browser, so this should only be used to for instance require that the email address ends with a specific domain.
list	string	-	-
Id of a `<datalist>` element with a list of predefined values to suggest to the user.
contentAfter	ReactNode	-	-
Inject an element into the input field, displayed at the end of the input. Usually used to display a custom `Icon` or `IconButton`.
defaultValue	string	-	-
Default value of an uncontrolled input.
value	string	-	-
Value of the input. Makes the input controlled.
onChange	ChangeEventHandler<HTMLInputElement, Element>	-	-
Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke).
variant	"top-label" | "floating-label"	-	top-label
name	string	✓	-
The name of the input to use when submitting the form.
placeholder	string	-	-
Placeholder text to show in the input when it is empty.
errorMessage	string	-	-
Set the error message of an input and mark it invalid.
aria-invalid	boolean	-	false
Force the input to be invalid.
hidden	boolean	-	-
id	string	-	-
title	string	-	-
dir	string	-	-
lang	string	-	-
slot	string	-	-
translate	"yes" | "no"	-	-
className	string	-	-
style	CSSProperties	-	-
tabIndex	number	-	-
onPointerDown	PointerEventHandler<Element>	-	-
onPointerEnter	PointerEventHandler<Element>	-	-
onPointerLeave	PointerEventHandler<Element>	-	-
onPointerMove	PointerEventHandler<Element>	-	-
onPointerUp	PointerEventHandler<Element>	-	-
label	string	✓	-
A concise label for the input, keep it below 40 characters. For a large form where only some options are required, add an asterisk (*) to the end of the label. If most fields in the form are required, add (optional) to the label.
disabled	boolean	-	false
Disables the input. Use sparingly as it can be non-obvious to users why an input has been disabled. Prefer showing validation messages and hints instead.
autoFocus	boolean	-	false
Gives the input focus on page load. Use sparingly as it can be confusing to screen-reader and mobile users.
readOnly	boolean	-	false
Makes the input read-only. Use sparingly, it's often preferred to present the data as regular text or in a table instead.
form	string	-	-
Id of a form element that this input should be associated with. Defaults to the containing form element.
hint	ReactNode	-	-
Additional hint or description.
enterKeyHint	"done" | "go" | "next" | "previous" | "search" ...	-	-
Hint the browser about what label to show for the Enter button on mobile keyboards.
required	boolean	-	false
Makes the input required.
aria-describedby	string	-	-
aria-labelledby	string	-	-
onInvalid	FormEventHandler<HTMLInputElement>	-	-
Fires if the input fails validation on form submit.
onFocus	FocusEventHandler<HTMLInputElement>	-	-
onBlur	FocusEventHandler<HTMLInputElement>	-	-
onKeyDown	KeyboardEventHandler<HTMLInputElement>	-	-
onKeyUp	KeyboardEventHandler<HTMLInputElement>	-	-

PasswordInput

Prop	Type	Required	Default
defaultPasswordVisible	boolean	-	false
Password is initially visible.
autoComplete	"off" | "current-password" | "new-password"	-	-
Pass `current-password` to autocomplete the users current password or `new-password` to autocomplete the new password in a change password form.
pattern	string	-	-
Regular expression that the password must match.
size	number	-	-
Specifies the visible width, in characters, of the input.
minLength	number	-	-
Minimum length of the password.
maxLength	number	-	-
Maximum length of the password.
showPasswordLabel	string	-	-
Label for the show password button.
defaultValue	string	-	-
Default value of an uncontrolled input.
value	string	-	-
Value of the input. Makes the input controlled.
onChange	ChangeEventHandler<HTMLInputElement, Element>	-	-
Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke).
variant	"top-label" | "floating-label"	-	top-label
name	string	✓	-
The name of the input to use when submitting the form.
placeholder	string	-	-
Placeholder text to show in the input when it is empty.
errorMessage	string	-	-
Set the error message of an input and mark it invalid.
aria-invalid	boolean	-	false
Force the input to be invalid.
hidden	boolean	-	-
id	string	-	-
title	string	-	-
dir	string	-	-
lang	string	-	-
slot	string	-	-
translate	"yes" | "no"	-	-
className	string	-	-
style	CSSProperties	-	-
tabIndex	number	-	-
onPointerDown	PointerEventHandler<Element>	-	-
onPointerEnter	PointerEventHandler<Element>	-	-
onPointerLeave	PointerEventHandler<Element>	-	-
onPointerMove	PointerEventHandler<Element>	-	-
onPointerUp	PointerEventHandler<Element>	-	-
label	string	✓	-
A concise label for the input, keep it below 40 characters. For a large form where only some options are required, add an asterisk (*) to the end of the label. If most fields in the form are required, add (optional) to the label.
disabled	boolean	-	false
Disables the input. Use sparingly as it can be non-obvious to users why an input has been disabled. Prefer showing validation messages and hints instead.
autoFocus	boolean	-	false
Gives the input focus on page load. Use sparingly as it can be confusing to screen-reader and mobile users.
readOnly	boolean	-	false
Makes the input read-only. Use sparingly, it's often preferred to present the data as regular text or in a table instead.
form	string	-	-
Id of a form element that this input should be associated with. Defaults to the containing form element.
hint	ReactNode	-	-
Additional hint or description.
enterKeyHint	"done" | "go" | "next" | "previous" | "search" ...	-	-
Hint the browser about what label to show for the Enter button on mobile keyboards.
required	boolean	-	false
Makes the input required.
aria-describedby	string	-	-
aria-labelledby	string	-	-
onInvalid	FormEventHandler<HTMLInputElement>	-	-
Fires if the input fails validation on form submit.
onFocus	FocusEventHandler<HTMLInputElement>	-	-
onBlur	FocusEventHandler<HTMLInputElement>	-	-
onKeyDown	KeyboardEventHandler<HTMLInputElement>	-	-
onKeyUp	KeyboardEventHandler<HTMLInputElement>	-	-

TelInput

Prop	Type	Required	Default
autoComplete	"off" | "tel" | "tel-country-code" | "tel-natio...	-	-
What type of information to autocomplete in the input. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
minLength	number	-	-
Minimum length of the telephone number.
maxLength	number	-	-
Maximum length of the telephone number.
size	number	-	-
Specifies the visible width, in characters, of the input.
pattern	string	-	-
Regular expression that the telephone number must match.
list	string	-	-
Id of a `<datalist>` element with a list of predefined values to suggest to the user.
contentAfter	ReactNode	-	-
Inject an element into the input field, displayed at the end of the input. Usually used to display a custom `Icon` or `IconButton`.
defaultValue	string	-	-
Default value of an uncontrolled input.
value	string	-	-
Value of the input. Makes the input controlled.
onChange	ChangeEventHandler<HTMLInputElement, Element>	-	-
Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke).
variant	"top-label" | "floating-label"	-	top-label
name	string	✓	-
The name of the input to use when submitting the form.
placeholder	string	-	-
Placeholder text to show in the input when it is empty.
errorMessage	string	-	-
Set the error message of an input and mark it invalid.
aria-invalid	boolean	-	false
Force the input to be invalid.
hidden	boolean	-	-
id	string	-	-
title	string	-	-
dir	string	-	-
lang	string	-	-
slot	string	-	-
translate	"yes" | "no"	-	-
className	string	-	-
style	CSSProperties	-	-
tabIndex	number	-	-
onPointerDown	PointerEventHandler<Element>	-	-
onPointerEnter	PointerEventHandler<Element>	-	-
onPointerLeave	PointerEventHandler<Element>	-	-
onPointerMove	PointerEventHandler<Element>	-	-
onPointerUp	PointerEventHandler<Element>	-	-
label	string	✓	-
A concise label for the input, keep it below 40 characters. For a large form where only some options are required, add an asterisk (*) to the end of the label. If most fields in the form are required, add (optional) to the label.
disabled	boolean	-	false
Disables the input. Use sparingly as it can be non-obvious to users why an input has been disabled. Prefer showing validation messages and hints instead.
autoFocus	boolean	-	false
Gives the input focus on page load. Use sparingly as it can be confusing to screen-reader and mobile users.
readOnly	boolean	-	false
Makes the input read-only. Use sparingly, it's often preferred to present the data as regular text or in a table instead.
form	string	-	-
Id of a form element that this input should be associated with. Defaults to the containing form element.
hint	ReactNode	-	-
Additional hint or description.
enterKeyHint	"done" | "go" | "next" | "previous" | "search" ...	-	-
Hint the browser about what label to show for the Enter button on mobile keyboards.
required	boolean	-	false
Makes the input required.
aria-describedby	string	-	-
aria-labelledby	string	-	-
onInvalid	FormEventHandler<HTMLInputElement>	-	-
Fires if the input fails validation on form submit.
onFocus	FocusEventHandler<HTMLInputElement>	-	-
onBlur	FocusEventHandler<HTMLInputElement>	-	-
onKeyDown	KeyboardEventHandler<HTMLInputElement>	-	-
onKeyUp	KeyboardEventHandler<HTMLInputElement>	-	-

UrlInput

Prop	Type	Required	Default
multiple	boolean	-	-
Accept multiple URLs.
autoComplete	"off" | "url" | "photo"	-	-
What type of information to autocomplete in the input. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
minLength	number	-	-
Minimum length of the URL.
maxLength	number	-	-
Maximum length of the URL.
pattern	string	-	-
Regular expression that the URL must match.
list	string	-	-
Id of a `<datalist>` element with a list of predefined values to suggest to the user.
contentAfter	ReactNode	-	-
Inject an element into the input field, displayed at the end of the input. Usually used to display a custom `Icon` or `IconButton`.
defaultValue	string	-	-
Default value of an uncontrolled input.
value	string	-	-
Value of the input. Makes the input controlled.
onChange	ChangeEventHandler<HTMLInputElement, Element>	-	-
Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke).
variant	"top-label" | "floating-label"	-	top-label
name	string	✓	-
The name of the input to use when submitting the form.
placeholder	string	-	-
Placeholder text to show in the input when it is empty.
errorMessage	string	-	-
Set the error message of an input and mark it invalid.
aria-invalid	boolean	-	false
Force the input to be invalid.
hidden	boolean	-	-
id	string	-	-
title	string	-	-
dir	string	-	-
lang	string	-	-
slot	string	-	-
translate	"yes" | "no"	-	-
className	string	-	-
style	CSSProperties	-	-
tabIndex	number	-	-
onPointerDown	PointerEventHandler<Element>	-	-
onPointerEnter	PointerEventHandler<Element>	-	-
onPointerLeave	PointerEventHandler<Element>	-	-
onPointerMove	PointerEventHandler<Element>	-	-
onPointerUp	PointerEventHandler<Element>	-	-
label	string	✓	-
A concise label for the input, keep it below 40 characters. For a large form where only some options are required, add an asterisk (*) to the end of the label. If most fields in the form are required, add (optional) to the label.
disabled	boolean	-	false
Disables the input. Use sparingly as it can be non-obvious to users why an input has been disabled. Prefer showing validation messages and hints instead.
autoFocus	boolean	-	false
Gives the input focus on page load. Use sparingly as it can be confusing to screen-reader and mobile users.
readOnly	boolean	-	false
Makes the input read-only. Use sparingly, it's often preferred to present the data as regular text or in a table instead.
form	string	-	-
Id of a form element that this input should be associated with. Defaults to the containing form element.
hint	ReactNode	-	-
Additional hint or description.
enterKeyHint	"done" | "go" | "next" | "previous" | "search" ...	-	-
Hint the browser about what label to show for the Enter button on mobile keyboards.
required	boolean	-	false
Makes the input required.
aria-describedby	string	-	-
aria-labelledby	string	-	-
onInvalid	FormEventHandler<HTMLInputElement>	-	-
Fires if the input fails validation on form submit.
onFocus	FocusEventHandler<HTMLInputElement>	-	-
onBlur	FocusEventHandler<HTMLInputElement>	-	-
onKeyDown	KeyboardEventHandler<HTMLInputElement>	-	-
onKeyUp	KeyboardEventHandler<HTMLInputElement>	-	-

DateInput

Prop	Type	Required	Default
min	string	-	-
The earliest date/time to accept, in the `yyyy-mm-dd` format.
max	string	-	-
The latest date/time to accept, in the `yyyy-mm-dd` format.
autoComplete	string	-	-
What type of information to autocomplete in the input.
defaultValue	string	-	-
Default value of an uncontrolled input.
value	string	-	-
Value of the input. Makes the input controlled.
onChange	ChangeEventHandler<HTMLInputElement, Element>	-	-
Fires when the input’s value is changed.
variant	"top-label" | "floating-label"	-	top-label
name	string	✓	-
The name of the input to use when submitting the form.
errorMessage	string	-	-
Set the error message of an input and mark it invalid.
aria-invalid	boolean	-	false
Force the input to be invalid.
hidden	boolean	-	-
id	string	-	-
title	string	-	-
dir	string	-	-
lang	string	-	-
slot	string	-	-
translate	"yes" | "no"	-	-
className	string	-	-
style	CSSProperties	-	-
tabIndex	number	-	-
onPointerDown	PointerEventHandler<Element>	-	-
onPointerEnter	PointerEventHandler<Element>	-	-
onPointerLeave	PointerEventHandler<Element>	-	-
onPointerMove	PointerEventHandler<Element>	-	-
onPointerUp	PointerEventHandler<Element>	-	-
label	string	✓	-
A concise label for the input, keep it below 40 characters. For a large form where only some options are required, add an asterisk (*) to the end of the label. If most fields in the form are required, add (optional) to the label.
disabled	boolean	-	false
Disables the input. Use sparingly as it can be non-obvious to users why an input has been disabled. Prefer showing validation messages and hints instead.
autoFocus	boolean	-	false
Gives the input focus on page load. Use sparingly as it can be confusing to screen-reader and mobile users.
readOnly	boolean	-	false
Makes the input read-only. Use sparingly, it's often preferred to present the data as regular text or in a table instead.
form	string	-	-
Id of a form element that this input should be associated with. Defaults to the containing form element.
hint	ReactNode	-	-
Additional hint or description.
enterKeyHint	"done" | "go" | "next" | "previous" | "search" ...	-	-
Hint the browser about what label to show for the Enter button on mobile keyboards.
required	boolean	-	false
Makes the input required.
aria-describedby	string	-	-
aria-labelledby	string	-	-
onInvalid	FormEventHandler<HTMLInputElement>	-	-
Fires if the input fails validation on form submit.
onFocus	FocusEventHandler<HTMLInputElement>	-	-
onBlur	FocusEventHandler<HTMLInputElement>	-	-
onKeyDown	KeyboardEventHandler<HTMLInputElement>	-	-
onKeyUp	KeyboardEventHandler<HTMLInputElement>	-	-

CurrencyInput

Prop	Type	Required	Default
title	string	-	-
hidden	boolean	-	-
id	string	-	-
dir	string	-	-
lang	string	-	-
slot	string	-	-
translate	"yes" | "no"	-	-
className	string	-	-
style	CSSProperties	-	-
tabIndex	number	-	-
onPointerDown	PointerEventHandler<Element>	-	-
onPointerEnter	PointerEventHandler<Element>	-	-
onPointerLeave	PointerEventHandler<Element>	-	-
onPointerMove	PointerEventHandler<Element>	-	-
onPointerUp	PointerEventHandler<Element>	-	-
name	string	✓	-
The name of the input to use when submitting the form.
disabled	boolean	-	false
Disables the input. Use sparingly as it can be non-obvious to users why an input has been disabled. Prefer showing validation messages and hints instead.
required	boolean	-	false
Makes the input required.
onInvalid	FormEventHandler<HTMLInputElement>	-	-
Fires if the input fails validation on form submit.
onFocus	FocusEventHandler<HTMLInputElement>	-	-
onBlur	FocusEventHandler<HTMLInputElement>	-	-
aria-describedby	string	-	-
aria-invalid	boolean	-	false
Force the input to be invalid.
aria-labelledby	string	-	-
enterKeyHint	"done" | "go" | "next" | "previous" | "search" ...	-	-
Hint the browser about what label to show for the Enter button on mobile keyboards.
form	string	-	-
Id of a form element that this input should be associated with. Defaults to the containing form element.
readOnly	boolean	-	false
Makes the input read-only. Use sparingly, it's often preferred to present the data as regular text or in a table instead.
label	string	✓	-
A concise label for the input, keep it below 40 characters. For a large form where only some options are required, add an asterisk (*) to the end of the label. If most fields in the form are required, add (optional) to the label.
errorMessage	string	-	-
Set the error message of an input and mark it invalid.
autoFocus	boolean	-	false
Gives the input focus on page load. Use sparingly as it can be confusing to screen-reader and mobile users.
hint	ReactNode	-	-
Additional hint or description.
onKeyDown	KeyboardEventHandler<HTMLInputElement>	-	-
onKeyUp	KeyboardEventHandler<HTMLInputElement>	-	-
placeholder	string	-	-
Placeholder text to show in the input when it is empty.
currency	string	✓	-
The currency to display.
currencyDisplay	"symbol" | "code"	-	symbol
How to display the currency. "symbol" uses a localized currency symbol such as € or kr if appropriate for the locale. "code" always uses the ISO currency code.
align	"start" | "end"	-	-
Aligns the input content.
size	number	-	-
Specifies the visible width, in characters, of the input.
value	string | number	-	-
Value of the input. Makes the input controlled.
defaultValue	string | number	-	-
Default value of an uncontrolled input.
onChange	ChangeEventHandler<HTMLInputElement, Element>	-	-
Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke).
list	string	-	-
Id of a `<datalist>` element with a list of predefined values to suggest to the user.
inputMode	"text" | "numeric" | "decimal"	-	numeric
Hint the browser about the appropriate virtual keyboard for the type of expected data. Use `text` if you need support for negative numbers as the minus sign is not available on iPhone keyboards.

UnitInput

Prop	Type	Required	Default
title	string	-	-
hidden	boolean	-	-
id	string	-	-
dir	string	-	-
lang	string	-	-
slot	string	-	-
translate	"yes" | "no"	-	-
className	string	-	-
style	CSSProperties	-	-
tabIndex	number	-	-
onPointerDown	PointerEventHandler<Element>	-	-
onPointerEnter	PointerEventHandler<Element>	-	-
onPointerLeave	PointerEventHandler<Element>	-	-
onPointerMove	PointerEventHandler<Element>	-	-
onPointerUp	PointerEventHandler<Element>	-	-
name	string	✓	-
The name of the input to use when submitting the form.
disabled	boolean	-	false
Disables the input. Use sparingly as it can be non-obvious to users why an input has been disabled. Prefer showing validation messages and hints instead.
required	boolean	-	false
Makes the input required.
onInvalid	FormEventHandler<HTMLInputElement>	-	-
Fires if the input fails validation on form submit.
onFocus	FocusEventHandler<HTMLInputElement>	-	-
onBlur	FocusEventHandler<HTMLInputElement>	-	-
aria-describedby	string	-	-
aria-invalid	boolean	-	false
Force the input to be invalid.
aria-labelledby	string	-	-
enterKeyHint	"done" | "go" | "next" | "previous" | "search" ...	-	-
Hint the browser about what label to show for the Enter button on mobile keyboards.
form	string	-	-
Id of a form element that this input should be associated with. Defaults to the containing form element.
readOnly	boolean	-	false
Makes the input read-only. Use sparingly, it's often preferred to present the data as regular text or in a table instead.
label	string	✓	-
A concise label for the input, keep it below 40 characters. For a large form where only some options are required, add an asterisk (*) to the end of the label. If most fields in the form are required, add (optional) to the label.
errorMessage	string	-	-
Set the error message of an input and mark it invalid.
autoFocus	boolean	-	false
Gives the input focus on page load. Use sparingly as it can be confusing to screen-reader and mobile users.
hint	ReactNode	-	-
Additional hint or description.
onKeyDown	KeyboardEventHandler<HTMLInputElement>	-	-
onKeyUp	KeyboardEventHandler<HTMLInputElement>	-	-
placeholder	string	-	-
Placeholder text to show in the input when it is empty.
unit	"bit" | "byte" | "celsius" | "centimeter" | "da...	✓	-
unitDisplay	"short" | "long"	-	short
How to display the unit.
align	"start" | "end"	-	-
Aligns the input content.
size	number	-	-
Specifies the visible width, in characters, of the input.
value	string | number	-	-
Value of the input. Makes the input controlled.
defaultValue	string | number	-	-
Default value of an uncontrolled input as a locale formatted string.
onChange	ChangeEventHandler<HTMLInputElement, Element>	-	-
Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke).
list	string	-	-
Id of a `<datalist>` element with a list of predefined values to suggest to the user.
inputMode	"text" | "numeric" | "decimal"	-	numeric
Hint the browser about the appropriate virtual keyboard for the type of expected data. Use `text` if you need support for negative numbers as the minus sign is not available on iPhone keyboards.

TextArea

Prop	Type	Required	Default
variant	"top-label" | "floating-label"	-	top-label
name	string	✓	-
The name of the textarea to use when submitting the form.
placeholder	string	-	-
Placeholder text to show in the textarea when it is empty.
minLength	number	-	-
Minimum length of the textarea value.
maxLength	number	-	-
Maximum length of the textarea value.
rows	number	-	2
The number of visible text lines to show in the textarea.
autoCapitalize	"none" | "sentences" | "words" | "characters"	-	-
Controls whether and how text input is automatically capitalized as it is entered by the user.
spellCheck	boolean	-	-
Controls whether the element may be checked for spelling errors.
autoComplete	"off" | "on"	-	-
Enable or disable autocomplete in the textarea.
errorMessage	string	-	-
Set the error message of a textarea and mark it invalid.
aria-invalid	boolean	-	false
Force the textarea to be invalid.
defaultValue	string	-	-
Default value of an uncontrolled textarea.
value	string	-	-
Value of the textarea. Makes the textarea controlled.
onChange	ChangeEventHandler<HTMLTextAreaElement, Element>	-	-
Fires immediately when the textarea's value is changed by the user (for example, it fires on every keystroke).
hidden	boolean	-	-
id	string	-	-
title	string	-	-
dir	string	-	-
lang	string	-	-
slot	string	-	-
translate	"yes" | "no"	-	-
className	string	-	-
style	CSSProperties	-	-
tabIndex	number	-	-
onPointerDown	PointerEventHandler<Element>	-	-
onPointerEnter	PointerEventHandler<Element>	-	-
onPointerLeave	PointerEventHandler<Element>	-	-
onPointerMove	PointerEventHandler<Element>	-	-
onPointerUp	PointerEventHandler<Element>	-	-
label	string	✓	-
A concise label for the input, keep it below 40 characters. For a large form where only some options are required, add an asterisk (*) to the end of the label. If most fields in the form are required, add (optional) to the label.
disabled	boolean	-	false
Disables the input. Use sparingly as it can be non-obvious to users why an input has been disabled. Prefer showing validation messages and hints instead.
autoFocus	boolean	-	false
Gives the input focus on page load. Use sparingly as it can be confusing to screen-reader and mobile users.
readOnly	boolean	-	false
Makes the input read-only. Use sparingly, it's often preferred to present the data as regular text or in a table instead.
form	string	-	-
Id of a form element that this input should be associated with. Defaults to the containing form element.
hint	ReactNode	-	-
Additional hint or description.
enterKeyHint	"done" | "go" | "next" | "previous" | "search" ...	-	-
Hint the browser about what label to show for the Enter button on mobile keyboards.
required	boolean	-	false
Makes the input required.
aria-describedby	string	-	-
aria-labelledby	string	-	-
onInvalid	FormEventHandler<HTMLTextAreaElement>	-	-
Fires if the input fails validation on form submit.
onFocus	FocusEventHandler<HTMLTextAreaElement>	-	-
onBlur	FocusEventHandler<HTMLTextAreaElement>	-	-
onKeyDown	KeyboardEventHandler<HTMLTextAreaElement>	-	-
onKeyUp	KeyboardEventHandler<HTMLTextAreaElement>	-	-