@workday/canvas-kit-react-text-input

Canvas Kit Text Input

Canvas-styled React text input components.

> Workday Design Reference

Installation

yarn add @workday/canvas-kit-react

or

yarn add @workday/canvas-kit-react-text-input

TextInput

Usage

Simple Example

Note: While a base input component is provided in this package, it is not accessible when used as is. It should be used in tandem with FormField to be made fully accessible (see below).

import * as React from 'react';
import TextInput from '@workday/canvas-kit-react-text-input';

<TextInput placeholder="Placeholder" value={this.state.value} onChange={() => {}} />;

Accessible Example

import * as React from 'react';
import TextInput from '@workday/canvas-kit-react-text-input';
import FormField from '@workday/canvas-kit-react-form-field';

// Accessible default state
<FormField label="My Field" inputId="my-input-field">
  <TextInput placeholder="Placeholder" value={this.state.value} onChange={() => {}} />;
</FormField>

// Accessible error state
<FormField
  label="My Field"
  inputId="my-input-field"
  hintText="Helpful text to resolve error"
  hintId="my-input-field-error"
  error={FormField.ErrorType.Error}
>
  <TextInput placeholder="Placeholder" value={this.state.value} onChange={() => {}} />;
</FormField>

If use inside a FormField doesn't work for your use case, you can use the aria-labelledby attribute.

import * as React from 'react';
import TextInput from '@workday/canvas-kit-react-text-input';
<label id="123">Label</label>
...
<TextInput placeholder="Placeholder" value={this.state.value} onChange={() => {}} aria-labelledby="123" />;

Static Properties

ErrorType: ErrorType

<TextInput error={TextInput.ErrorType.Alert} />

Component Props

Required

label: string

The label text displayed for the input.

Optional

disabled: boolean

Whether or not the input is disabled.

Default: false

---

error: ErrorType

The type of error to display, if any.

Type	Description
Error	Red outline with error icon.
Alert	Yellow outline with alert icon.

Default: undefined

---

inputRef: React.Ref<HTMLInputElement>

The ref callback for the inner input element.

Default: undefined

---

onChange: (e: React.ChangeEvent<HTMLInputElement>) => void

The callback fired when the value is changed.

Default: undefined

---

placeholder: string

Placeholder text to be displayed if there is no input value.

Default: ''

---

readOnly: boolean

If true, user will be unable to interact with the field.

Default: false

---

type: string

HTML5 input type

Default: text

---

value: any

Input value

Default: undefined

---