Formatted Text Inputs

Callback function to handle clicks events on the copy button.

@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.

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

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

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

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

Flag to allow for default validation message to show

The value of the input field (controlled)

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

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

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

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.

Callback function triggered when the copy operation fails.

@ignore

@ignore

@ignore

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

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

Props to be spread onto the parent div container

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

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

Timeout duration in milliseconds before ressetting the status to default.

Callback function triggered when the copy operation is successful.

Callback function triggered when the timeout elapses.

Other props to be spread onto the copy button.

Overrides for labels that have been defaulted in the component.

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

Value to be shown in the currency input. The value will be reformatted to the proper locale string based on the props supplied. e.g. if locale is "en-US" and currency is "USD" then "3" -> "3.00"; "2143.22" -> "2,143.22"

The onChange event handler (controlled).

The onBlur event handler (controlled). Should be used to get the normalized (non-localized) value as a number. First argument to function is event object. Second argument to function is object with the following keys: isInvalid to determine if value could not be formatted. 'normalizedValue' that gives the value in normalized (non-localized) format e.g. "10,000.99" -> "10000.99"; "10.000,99" -> "10000.99" 'formattedValue' that gives a formatted value in localized format e.g. "10,000.99"

@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.

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

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

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

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

Flag to allow for default validation message to show

Default value to be shown in the field. Will be reformatted to the proper locale string. e.g. "3" -> "3.00"; "2143.22" -> "2,143.22"

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

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.

@ignore

@ignore

@ignore

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

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

A ref to the container element

Props to be spread onto the parent div container

If passed, the input value will be reset to this number when the input is cleared during the onBlur event. The value will be reformatted to the proper locale string based on the props supplied. e.g. if locale is "en-US" and currency is "USD" then "3" -> "3.00"; "2143.22" -> "2,143.22"

ISO 4217 currency code

BCP 47 language tag

If false will hide the fractional number e.g. "300.00" -> "300"

If true will localize currency code (if known) to show symbol e.g. $/£/€

Hint text to use inbuilt hint instead of a custom label

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

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

The id of a label, which provides an accessible name for the component

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

The name used for form submission.

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

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

Controlled value for the date input in ISO format ('YYYY-MM-DD') or Date object.

Default value for uncontrolled usage in ISO format ('YYYY-MM-DD') or Date object.

Callback fired when the date changes. @param event the event associated with the individual input field that triggered the change. @param date the date in ISO format ('YYYY-MM-DD').

Callback fired when the date input loses focus. Only gets called if the focus is not moving to another input field within the DateInput component. @param event the event associated with the individual input field that triggered the blur.

BCP 47 language tag to format the date input fields according to different cultural norms.

Whether to show placeholders in the input fields

Additional CSS class names to apply to the DateInput container.

Specifies which date fields to show and in what order.

ID of element providing additional description of the date input

AutoComplete settings for each of the input field parts

If true, indicates that the consumer must specify a value for the input before the owning form can be submitted.

@ignore For DLS Internal use only. The children to position in the input wrapper.

Overrides for labels that have been defaulted in the component.

@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.

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

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

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

Handler for focus loss events from any focusable HTML element within the component.

@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.

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

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

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

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

Flag to allow for default validation message to show

The value of the input field (controlled)

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

The default value of the input field (uncontrolled)

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

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

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.

@ignore

@ignore

@ignore

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

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

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

A ref to the container element

Props to be spread onto the span containing the children

Props to be spread onto the parent div container

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

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

Shows the password by default.

Controlled visibility of the password

Handler for changes in password visibility.

Overrides for labels that have been defaulted in the component.

Value to be shown in the PhoneInput (controlled). The value will be reformatted when focus is not on the PhoneInput. e.g. if phoneFormat is "### ### ####" and value is "1234567890" then it will be displayed as "123 456 7890".

The onChange event handler called when the input is changed.

The onBlur event handler called when the input is blurred.

The onFocus event handler called when the input is focused.

@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.

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

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

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

Flag to allow for default validation message to show

Default value to be shown in the PhoneInput (uncontrolled). The value will be reformatted when focus is not on the PhoneInput. e.g. if phoneFormat is "### ### ####" and defaultValue is "1234567890" then it will be displayed as "123 456 7890".

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

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.

@ignore

@ignore

@ignore

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

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

A ref to the container element

Props to be spread onto the span containing the children

Props to be spread onto the parent div container

The phone number calling code, e.g. "1", "44" @ignore

The phone number format, e.g. "### ### ####" @ignore

BCP 47 language tag e.g. "en-US", "de-DE" @ignore

Screenreader label for country flag @ignore

If true, will show calling code on the single country PhoneInput @ignore

If true, will show flag (if available) associated with the country in the locale prop @ignore

An array of objects with the following properties: callingCode: The phone number calling code, e.g. "1", "44". phoneFormat: The phone number format, e.g. "### ### ####". locale: BCP 47 language tag e.g. "en-US", "de-DE". country: The name of the country to be displayed in the select dropdown. @ignore

BCP 47 language tag e.g. "en-US", "de-DE" of the selected option (controlled) @ignore

BCP 47 language tag e.g. "en-US", "de-DE" of the default selected option (uncontrolled) @ignore

The id for the country @ignore

string

Props to be spread onto the multi-country select. @ignore

The id for the input field

Hint text for input

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

The onChange event handler called when the multi-country select is changed.

The onBlur event handler called when the multi-country select is blurred.

Overrides for labels that have been defaulted in the component.

@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.

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

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

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

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

Flag to allow for default validation message to show

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

The value of the input field (controlled)

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

The default value of the input field (uncontrolled)

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

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

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.

@ignore

@ignore

@ignore

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

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

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

A ref to the container element

Props to be spread onto the parent div container

Hint text to use inbuilt hint instead of a custom label

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

The slot for the tooltip