Package Exports

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

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@workday/canvas-kit-react-text-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Canvas Kit Text Input

Canvas-styled React text input components.

> Workday Design Reference

Installation

yarn add @workday/canvas-kit-react

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