Text Input

Inputs allow users to enter text into a field. They are typically appeal in forms and dialogs.

On this page

Import

Text Input

Loading preview
Open in Storybook

Text Area

Loading preview
Open in Storybook

Props

Text Input Props

NameDescriptionDefault
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean		-
aria-disabled

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Booleanish		-
label

Text that's used as the visual and accessible label for the component. If not provided, hide the component's built-in label.

string		-
autoComplete

Must be defined when the form control collects user personal data. Attribute value must match the tokens defined in input purposes section

string		-
name

The name attribute of the input field, will default to the id provided

string		-
required

Flag to allow for default validation message to show

boolean		-
type

The type of the input component, defaults to 'text'

HTMLInputTypeAttribute		-
value

The value of the input field (controlled)

string | number | readonly string[]		-
onChange

The onChange event handler to attach to the input field (controlled)

ChangeEventHandler<HTMLInputElement>		-
defaultValue

The default value of the input field (uncontrolled)

string | number | readonly string[]		-
id*

The id of the input component, used to associate the input with the built-in accessible label and hint

string		-
aria-describedby

The id of the container of the text describing the input, intended for custom hint text

string		-
aria-labelledby

The id of a label, which provides an accessible name for the component Identifies the element (or elements) that labels the current element. @see aria-describedby.

string		-
inputSlot

@ignore

undefined		-
isVisuallyDisabled

@ignore

undefined		-
statusMessageId

@ignore

undefined		-
childrenPosition

Positions the slot (children) to the left or right of the other content within the container

"start" | "end"		-
status

Default, error, or success state. Will use the value provided by the context when wrapped in a FieldControl component.

FieldControlStatus		-
statusMessage

The status message to be displayed if status is 'success' or 'error'.

string		-
containerRef

A ref to the container element

RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void)		-
containerProps

Props to be spread onto the parent div container

Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">		-
hint

Hint text to use inbuilt hint instead of a custom label

string		-
isHintVisuallyHidden

If true, visually hides the hint text (it will still be accessible to screen readers)

boolean		-
tooltip

The slot for the tooltip

ReactElement<({ id, placement: placementProp, disableHover, isOpen: openProp, defaultIsOpen, onIsOpenChange, children, shouldCreatePortal, }: TooltipProps) => Element, string | JSXElementConstructor<any>>		-
reactlytics
ReactlyticsProp		-

Text Area Props

NameDescriptionDefault
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean		-
aria-disabled

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Booleanish		-
label

Text that's used as the visual and accessible label for the component. If not provided, hide the component's built-in label.

string		-
id*

The ID for the input field, necessary for accessibility and labeling.

string		-
aria-labelledby

The id of a label, which provides an accessible name for the component Identifies the element (or elements) that labels the current element. @see aria-describedby.

string		-
status

Default, error, or success state. Will use the value provided by the context when wrapped in a FieldControl component.

FieldControlStatus		-
statusMessage

The status message to be displayed if status is 'success' or 'error'.

string		-
hint

Hint text to assist the user, displayed below the input.

string		-
isHintVisuallyHidden

If true, visually hides the hint text (it will still be accessible to screen readers)

boolean		-

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.