Text Input

Text Inputs allow users to enter words, numbers, or characters without styling.

GitHub Storybook Figma

yarn add @workday/canvas-kit-react

Sources

GitHub Storybook Figma

Install

yarn add @workday/canvas-kit-react

Anatomy

Label: Title of the Text Input.
Input Container: Rectangular container that houses the placeholder and input text.
Placeholder/Input Text: Placeholder text is optional and shows an example of how to format the text for what the input is used for.

Usage Guidance

Text Inputs can only support words, numbers or characters.
Standard and Wide Text Inputs does not support images or any text styling.
To ensure we don’t overwhelm users, there shouldn’t be more than two Wide Text Inputs on a page.
For all Text Inputs on Web, a user clicking into an input or label that is not disabled will trigger the text cursor to appear, allowing users the ability to type. As the user types in the Text Input, the placeholder text is replaced with the user’s input.

When to Use

Text Input is typically a form element used to collect user data that includes words, numbers or characters.

When to Use Something Else

If styling is needed, such as for configuring email messages, you can use a Rich Text Editor instead.
Use a Text Area when you need to let users enter an amount of text that’s longer than a single line.
Consider using a Select, Radio or Checkboxes if there are predetermined data that a user should not input themselves.

Examples

Basic Example

Text Input should be used in tandem with Form Field to meet accessibility standards.

Disabled

Set the disabled prop of the Text Input to prevent users from interacting with it.

Placeholder

Set the placeholder prop of the Text Input to display a sample of its expected format or value before a value has been provided.

Ref Forwarding

Text Input supports ref forwarding. It will forward ref to its underlying <input type="text"> element.

Grow

Set the grow prop of the wrapping Form Field to true to configure the Text Input to expand to the width of its container.

Street Address

The grow prop may also be applied directly to the Text Input if Form Field is not being used.

Label Position

Set the labelPosition prop of the wrapping Form Field to designate the position of the label relative to the Text Input. labelPosition accepts the following values:

FormField.LabelPosition.Top (Default)
FormField.LabelPosition.Left

Required

Set the required prop of the wrapping Form Field to true to indicate that the field is required. Labels for required fields are suffixed by a red asterisk.

Icons

InputGroup is available to add icons to the TextInput. Internally, a container div element is used with relative position styling on the div and absolute position styling on the start and end icons. InputGroup.InnerStart and InputGroup.InnerEnd are used to position elements at the start and end of the input. "start" and "end" are used instead of "left" and "right" to match CSS Logical Properties and will be semantically correct in left-to-right and right-to-left languages.

InputGroup.InnerStart and InputGroup.InnerEnd subcomponents can handle any child elements, but are built for icons. The default width is 40px, which is perfect for icons. If you need to use something else, be sure to set the width property of InputGroup.InnerStart or InputGroup.InnerEnd to match the intended width of the element.

Error States

Set the error prop of the wrapping Form Field to FormField.ErrorType.Alert or FormField.ErrorType.Error to set the Text Input to the Alert or Error state, respectively. You will also need to set the hintId and hintText props on the Form Field to meet accessibility standards.

The error prop may be applied directly to the Text Input with a value of TextInput.ErrorType.Alert or TextInput.ErrorType.Error if Form Field is not being used.

Alert

Alert: Please enter a valid email.

Error

Error: Please enter a valid email.

Component API

TextInput

Props

Props extend from input. Changing the as prop will change the element interface.

Name	Type	Description	Default
`error`		The type of error associated with the TextInput (if applicable).
`width`	`number \| string`	The width of the TextInput.
`theme`
`grow`	`boolean`	True if the component should grow to its container's width. False otherwise.
`children`	`React.ReactNode`
`as`	`React.ElementType`	Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element. Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.	`input`
`ref`	`React.Ref<R = input>`	Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).

TextInput.ErrorType

Basic type information:

ErrorType

InputGroup

An InputGroup is a container around a with optional inner start and end elements. The inner start and end elements are usually icons or icon buttons visually represented inside the input. The InputGroup will add padding to the input so the icons/buttons display correctly. This component uses React.Children.map and React.cloneElement from the React.Children API. This means all children must be InputGroup.* components. Any other direct children will cause issues. You can add different elements/components inside the and subcomponents.

<InputGroup>
  <InputGroup.InnerStart as={SystemIcon} pointerEvents="none" icon={searchIcon} />
  <InputGroup.Input />
  <InputGroup.InnerEnd>
    <TertiaryButton tabIndex={-1} icon={xIcon} size="small" />
  </InputGroup.InnerEnd>
</InputGroup>

Layout Component

InputGroup supports all props from thelayout component.

Props

Props extend from div. Changing the as prop will change the element interface.

Props extend from . If a model is passed, props from InputGroupModelConfig are ignored.

Name	Type	Description	Default
`children`	`ReactNode`
`as`	`React.ElementType`	Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element. Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.	`div`
`ref`	`React.Ref<R = div>`	Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).
`model`		Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.
`elemPropsHook`	`( model: , elemProps: TProps ) => HTML Attributes`	Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.

InputGroup.InnerStart

A component to show inside and at the start of the input. The input's padding will be adjusted to not overlap with this element. Use width (number of pixels only) to adjust the width offset. The width defaults to 40px which is the correct width for icons or icon buttons.

Layout Component

InputGroup.InnerStart supports all props from thelayout component.

Props

Props extend from div. Changing the as prop will change the element interface.

Name	Type	Description	Default
`children`	`ReactNode`
`as`	`React.ElementType`	Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element. Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.	`div`
`ref`	`React.Ref<R = div>`	Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).
`model`		Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.
`elemPropsHook`	`( model: , elemProps: TProps ) => HTML Attributes`	Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.

InputGroup.Input

The input to render. By default, this is a . Use the as prop to change the component to be rendered.

Layout Component

InputGroup.Input supports all props from thelayout component.

Props

Props extend from . Changing the as prop will change the element interface.

Name	Type	Description
`children`	`ReactNode`
`as`	`React.ElementType`	Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element. Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.
`ref`	`React.Ref<R = >`	Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).
`model`		Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.
`elemPropsHook`	`( model: , elemProps: TProps ) => HTML Attributes`	Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.

useInputGroupInput

Basic type information:

useInputGroupInput

InputGroup.InnerEnd

A component to show inside and at the end of the input. The input's padding will be adjusted to not overlap with this element. Use width (number of pixels only) to adjust the width offset. The width defaults to 40px which is the correct width for icons or icon buttons within the input.

Layout Component

InputGroup.InnerEnd supports all props from thelayout component.

Props

Props extend from div. Changing the as prop will change the element interface.

Name	Type	Description	Default
`children`	`ReactNode`
`as`	`React.ElementType`	Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element. Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.	`div`
`ref`	`React.Ref<R = div>`	Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).
`model`		Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.
`elemPropsHook`	`( model: , elemProps: TProps ) => HTML Attributes`	Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.

InputGroup.ClearButton

A component that can be added to an input group that will clear the input. It will only render when the input has a value and will fade when a value is entered.

Layout Component

InputGroup.ClearButton supports all props from thelayout component.

Props

Props extend from . Changing the as prop will change the element interface.

Name	Type	Description	Default
`variant`	`'inverse' \| undefined`	The variant of the TertiaryButton.
`size`		There are four button sizes: `extraSmall`, `small`, `medium`, and `large`. If no size is provided, it will default to `medium`.
`iconPosition`		Button icon positions can either be `start` or `end`. If no value is provided, it defaults to `start`.
`icon`		The icon of the TertiaryButton.
`shouldMirrorIcon`	`boolean`	If set to `true`, transform the icon's x-axis to mirror the graphic
`allCaps`	`boolean`	If set to `true`, transform text to all letters uppercase
`children`	`ReactNode`
`isThemeable`	`boolean`	If set to `true`, make icon button available to use theme colors instead of default
`theme`
`fill`		The fill color of the SystemIcon. This overrides `color`.
`color`		The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overriden by `accent` and `fill`.
`styles`
`shouldMirror`	`boolean`	If set to `true`, transform the SVG's x-axis to mirror the graphic	`false`
`background`		The background color of the SystemIcon.
`accent`		The accent color of the SystemIcon. This overrides `color`.
`accentHover`		The accent color of the SystemIcon on hover. This overrides `colorHover`.
`backgroundHover`		The background color of the SystemIcon on hover.
`colorHover`		The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overriden by `accentHover` and `fillHover`.
`fillHover`		The fill color of the SystemIcon on hover. This overrides `colorHover`.
`colors`		Override default colors of a button. The default will depend on the button type
`fillIcon`	`boolean`	Whether the icon should received filled (colored background layer) or regular styles. Corresponds to `toggled` in ToolbarIconButton
`grow`	`boolean`	True if the component should grow to its container's width. False otherwise.
`as`	`React.ElementType`	Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element. Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.
`ref`	`React.Ref<R = >`	Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).
`model`		Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.
`elemPropsHook`	`( model: , elemProps: TProps ) => HTML Attributes`	Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.

useClearButton

(
  model: , 
  elemProps: {}, 
  ref: React.Ref
) => {
  role: 'presentation';
  tabIndex: unknown {
    "kind": "unknown",
    "value": "unknown",
    "text": "SyntheticNode - PrefixUnaryExpression"
  };
  icon: ;
  size: 'small';
  transition: 'opacity 300ms ease';
  onMouseDown: (event: ) => void;
  onClick: () => void;
  style: {
    opacity:  0  | 1;
    pointerEvents:  'auto'  | 'none';
  };
}

Model

useInputGroupModel

useInputGroupModel (config: ):

Specifications

Given	When	Then
given the 'Basic' story is rendered		it should not have any axe errors
given the 'Basic' story is rendered	clicked	it should be focused
given the 'Basic' story is rendered	text is entered	it should reflect the text typed
given the 'Alert' story is rendered		it should not have any axe errors
given the 'Alert' story is rendered	clicked	it should be focused
given the 'Alert' story is rendered	text is entered	it should reflect the text typed
given the 'Error' story is rendered		it should not have any axe errors
given the 'Error' story is rendered	clicked	it should be focused
given the 'Error' story is rendered	text is entered	it should reflect the text typed
given the 'Disabled' story is rendered		it should not have any axe errors
given the 'Disabled' story is rendered		it should be disabled
given the 'Placeholder' story is rendered		it should not have any axe errors
given the 'Placeholder' story is rendered		it should render a placeholder text
given the 'Placeholder' story is rendered		it should reflect the text typed

Source: TextInput.spec.ts

Accessibility Guidelines

How Text Inputs Impact the Accessible Experience

Programmatically associating labels and instructions to form inputs is one of the most important foundational practices for building accessible forms.

For Text Input, placeholder values are best used for hints or examples of valid input. Designers should avoid relying on placeholder text for explaining the purpose of the input, as placeholders often don’t provide enough contrast against the text input background. In addition to lower contrast, placeholders disappear once users enter information, impacting users with memory loss, cognitive disabilities, or who are simply distracted.

Keyboard Interaction

Each Text Input must have a focus indicator that is highly visible against the background and against the non-focused state. Refer to Accessible Colors for more information.

Text Input must support the following keyboard interactions:

Tab: focus into and out of each text area

Text Input must communicate the following to users:

This component is a text field
The accessible name (label) describing the purpose of the field
Text or placeholder values inside the field
If applicable, whether the field is required, disabled, or invalid

Design Annotations Needed

No design annotations needed

Implementation Markup Needed

Text Input must have an aria-describedby attribute referencing the unique id value of the error text when an inline alert or error is shown.
Text Input must have a required attribute when the field is required for form submission.
[Included in component] A <label> element must be added with a for attribute referencing the unique id value of the associated text area.
[Included in component] An aria-invalid=”true” attribute must be set on the Text Input when the field has an error condition.
[Included in component] A disabled attribute must be set on the Text Input when the field is disabled.

Content Guidelines

Labels for Text Inputs are written in title case.
Refer to the guidelines on Placeholder Text in the Content Style Guide for more tips on how to write placeholder text.

Figma

Sources

Figma

Anatomy

Label: Text used as a title or brief description of the input.
Placeholder/Input Text: Placeholder text is optional and shows an example of the intended input.
Helper Text (Optional): Message to aid in users understanding of acceptable input text.
Input Container: Rectangular container that houses the placeholder and input text.
Required Asterisk (Optional): Appears only when the input is required.

Interaction States

Mobile inputs include several interactive states; inactive, active, disabled and pressed states.

Inactive states are the default state if the input is not active, disabled or displaying an alert.

Active states are displayed with a blue border, a cursor, and a keyboard.

Disabled states are grayed out to prevent users from interacting with the input.

While actively pressing on an input, the container fill is displayed in gray to provide feedback to the user of their touch.

Notification States

Notification states on mobile include an additional visual affordance compared to web notifications. They include an icon and a notification label.

Usage Guidance

When to Use

A Text Input is used to collect user data that includes words, numbers, or characters.
Use helper text to instruct the user what the proper input type may be.
Use placeholder text only to provide examples of proper inputs. Never use placeholder text to help instruct users.

When to Use Something Else

If the user needs to input a time, use a time picker.
If the user needs to input a date, use a date picker.
If input styling is needed, such as for configuring email messages, use a Rich Text Editor.
Use a Text Area when you need to let users enter an amount of text that’s longer than a single line.
Consider using a Select, Radio or Checkboxes if there is predetermined data that a user should not input themself.

Do use helper text to display important information that aids in the successful completion of an input.

Don't

Don't use instructional text as placeholder text because it will disappear as the user starts typing and will no longer be helpful to the user.

Mobile Guidance

Mobile text inputs are larger in height to better accommodate finger interaction.
Mobile text inputs have larger typography for better readability on smaller screens.

Truncation

Labels

Labels should be short and concise. They do not have a limit on how long they may be. Once the label exceeds the length of the container it will wrap to another line.

Helper Text

Helper Text should be short and concise. They do not have a limit on how long they may be. Once helper text exceeds the length of the container it will wrap to another line.

Input Text

When the input text exceeds the length of the container the text becomes truncated at the trailing end of the container while inactive. While actively typing into the input, the text scrolls off the leading edge of the container.

Keyboards

Mobile devices utilize on-screen keyboards. It is often up to the designer to specify keyboard-type in their designs for the intended input. These keyboards vary based on the brand of the device; however, most devices have dedicated keyboards for specific types of inputs such as:

Alphabetic
Numeric
Alphanumeric
Email

Use the appropriate keyboard based on the intended input.

Don't

Don't use the wrong keyboard for an input as this causes more work for the user. This could prevent the user from completing their task.

Screen Size Differences

Typically, inputs on mobile should stretch to the full width of the screen. However, there are some exceptions for providing limited space to set expectations of the input, such as providing a smaller text input box for entering an address ZIP code. For larger mobile devices, inputs should have a maximum width of 600 pts to retain proper readability.

API Documentation

LabelledTextFieldStyle

public struct LabelledTextFieldStyle: TextFieldStyle

WD-standard labelled text field style conforming to Apple's TextFieldStyle protocol.

Methods

init(text:label:accessibilityLabel:textFieldButtonAccessibilityLabel:helperText:context:)

public init(
    text: Binding<String>,
    label: String,
    accessibilityLabel: String,
    textFieldButtonAccessibilityLabel: String,
    helperText: String?,
    context: SemanticContext
)

Create an instance of LabelledTextFieldStyle.

Parameters

Name	Description
text	Text binding so the clear button can work, already localized.
label	Label to be positioned above field, already localized.
accessibilityLabel	Accessibility label of field, already localized.
textFieldButtonAccessibilityLabel	Accessibility label of the text field button (re: “x” clear button).
helperText	Helper text below field, already localized.
context	`SemanticContext` of the field.

init(text:label:helperText:context:localizer:)

public init(
    text: Binding<String>,
    label: String,
    helperText: String?,
    context: SemanticContext,
    localizer: LocalizationAdapting
)

Create an instance of LabelledTextFieldStyle.

Parameters

Name	Description
text	Text binding so the clear button can work, already localized.
label	Label to be positioned above field, already localized.
helperText	Helper text below field. Helper text will be prefixed with “Error:”/“Warning:” as part of this init.
context	`SemanticContext` of the field.
localizer	localizer for the field.

_body(configuration:)

public func _body(configuration: TextField<Self._Label>) -> some View

Accessibility Guidelines

Refreshed mobile guidelines will be coming soon!

Figma

Sources

Figma

Anatomy

Label: Text used as a title or brief description of the input.
Placeholder/Input Text: Placeholder text is optional and shows an example of the intended input.
Helper Text (Optional): Message to aid in users understanding of acceptable input text.
Input Container: Rectangular container that houses the placeholder and input text.
Required Asterisk (Optional): Appears only when the input is required.

Interaction States

Mobile inputs include several interactive states; inactive, active, disabled and pressed states.

Inactive states are the default state if the input is not active, disabled or displaying an alert.

Active states are displayed with a blue border, a cursor, and a keyboard.

Disabled states are grayed out to prevent users from interacting with the input.

While actively pressing on an input, the container fill is displayed in gray to provide feedback to the user of their touch.

Notification States

Notification states on mobile include an additional visual affordance compared to web notifications. They include an icon and a notification label.

Usage Guidance

When to Use

A Text Input is used to collect user data that includes words, numbers, or characters.
Use helper text to instruct the user what the proper input type may be.
Use placeholder text only to provide examples of proper inputs. Never use placeholder text to help instruct users.

When to Use Something Else

If the user needs to input a time, use a time picker.
If the user needs to input a date, use a date picker.
If input styling is needed, such as for configuring email messages, use a Rich Text Editor.
Use a Text Area when you need to let users enter an amount of text that’s longer than a single line.
Consider using a Select, Radio or Checkboxes if there is predetermined data that a user should not input themself.

Do use helper text to display important information that aids in the successful completion of an input.

Don't

Don't use instructional text as placeholder text because it will disappear as the user starts typing and will no longer be helpful to the user.

Mobile Guidance

Mobile text inputs are larger in height to better accommodate finger interaction.
Mobile text inputs have larger typography for better readability on smaller screens.

Truncation

Labels

Labels should be short and concise. They do not have a limit on how long they may be. Once the label exceeds the length of the container it will wrap to another line.

Helper Text

Helper Text should be short and concise. They do not have a limit on how long they may be. Once helper text exceeds the length of the container it will wrap to another line.

Input Text

Keyboards

Alphabetic
Numeric
Alphanumeric
Email

Use the appropriate keyboard based on the intended input.

Don't

Don't use the wrong keyboard for an input as this causes more work for the user. This could prevent the user from completing their task.

Screen Size Differences

API Documentation

Component Definition

@Composable
fun TextInputUiComponent(
    modifier: Modifier = Modifier,
    label: String? = null,
    value: String,
    onValueChange: (String) -> Unit,
    readOnly: Boolean = false,
    placeholder: String? = null,
    placeholderTextStyle: TextStyle = WorkdayTheme.canvasTypography.bodyMedium,
    heightConfig: TextInputHeightConfig = singleLineConfig(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    helperText: String? = null,
    onClickInputText: (() -> Unit) = {},
    onClickClearTextIcon: (() -> Unit) = {},
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions(),
    semanticState: SemanticState = SemanticState()
) {

Parameters

All undocumented parameters are native Android Compose types that can be found in the developer documentation.

Name	Type	Default	Description
label	`String?`	null	The text above the input that typically designates the name of the component
value	`String`		The text to be displayed inside of the text input
onValueChange	`(String) -> Unit)`		Callback lambda that is executed whenever the text of the input changes.
readOnly	`Boolean`	false	Removes the ability for user input into the text input. The entire Input surface provides a ripple click animation when readOnly is set to true.
placeholder	`String?`	null	This text is shown inside of the input when the value is empty to provide a hint to the user.
placeholderTextStyle	`TextStyle`	bodySmall	Configures the placeholder typography style.
heightConfig	`TextInputHeightConfig`	singleLineConfig()	Toggles between a `TextInput` and `TextArea` UI Component. Provides min height and fixed height configurations for multi-line inputs.
leadingIcon	`Composable?`	null	Icon composable rendered at the start of the input area.
trailingIcon	`Composable?`	null	Icon composable rendered at the end of the input area.
helperText	`String?`	null	Helper text is displayed underneath the input area that to give additional context to the user. Error and Alert helper text prefixes are localized and automatically displayed when the component’s semantic state is changed
onClickInputText	`(() -> Unit)`	{}	Callback lambda that is executed when the user clicks on the Input area.
onClickClearTextIcon	`(() -> Unit)`	{}	Callback lambda that is executed when the user clicks on the “clear text” trailing Icon that is displayed while the component is focused.
semanticState	`SemanticState`	SemanticState()	Adjusts the state of the Component. This allows for enabling, disabling, warning, error, and required states.

Accessibility Guidelines

Refreshed mobile guidelines will be coming soon!

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #canvas or #canvas-kitchannels on Slack.

FAQ Section

Text Input

Anatomy

Usage Guidance

When to Use

When to Use Something Else

Examples

Basic Example

Disabled

Placeholder

Ref Forwarding

Grow

Label Position

Required

Icons

Error States

Alert

Error

Component API

TextInput

Props

TextInput.ErrorType

InputGroup

Layout Component

Props

InputGroup.InnerStart

Layout Component

Props

InputGroup.Input

Layout Component

Props

useInputGroupInput

InputGroup.InnerEnd

Layout Component

Props

InputGroup.ClearButton

Layout Component

Props

useClearButton

Model

useInputGroupModel

Specifications

Accessibility Guidelines

How Text Inputs Impact the Accessible Experience

Keyboard Interaction

Screen Reader Interaction

Design Annotations Needed

Implementation Markup Needed

Content Guidelines

Anatomy

Interaction States

Notification States

Usage Guidance

When to Use

When to Use Something Else

Mobile Guidance

Truncation

Keyboards

Screen Size Differences

API Documentation

Methods

Parameters

Parameters

Accessibility Guidelines

Anatomy

Interaction States

Notification States

Usage Guidance

When to Use

When to Use Something Else

Mobile Guidance

Truncation

Keyboards

Screen Size Differences

API Documentation

Component Definition

Parameters

Accessibility Guidelines

Can't Find What You Need?