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

Canvas Kit Text Input

Canvas-styled React text input components.

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

`hasIcon: boolean`

Whether or not the input will have an icon displayed. If yes, extra padding will be added to the right.

Default: false

`inputRef: React.Ref<HTMLInputElement>`

The ref callback for the inner input element.

Default: undefined

`onChange: React.ChangeEventHandler<HTMLInputElement>`

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

canvas canvas-kit react components workday text-input

@emotion/core @emotion/styled @workday/canvas-kit-react-common @workday/canvas-kit-react-core @workday/canvas-kit-react-icon @workday/canvas-system-icons-web

@infinitebrahmanuniverse/nolb-_wor @everything-registry/sub-chunk-1021 @workday/canvas-kit-labs-react-pagination @workday/canvas-kit-labs-react-color-picker @workday/canvas-kit-labs-react-combobox @workday/canvas-kit-labs-react-header @workday/canvas-kit-react-color-picker

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4.0.0-prerelease.f29f26b.3

4 years ago

4.0.0-prerelease.25ebd14.2

4 years ago

4.0.0-prerelease.370c732.1

4 years ago

4.0.0-prerelease.9bee8d0.0

4 years ago

3.7.1-next.2

4 years ago

3.7.1-next.0

4 years ago

4.0.0-prerelease.2df320f.3

4 years ago

4.0.0-beta.3

4 years ago

4.0.0-prerelease.42c1aef.2

4 years ago

4.0.0-prerelease.bf33fae.0

4 years ago

4.0.0-prerelease.839d919.25

4 years ago

4.0.0-prerelease.0ec7791.1

4 years ago

4.0.0-beta.2

4 years ago

4.0.0-prerelease.0c47b9c.26

4 years ago

4.0.0-prerelease.22c6ff1.24

4 years ago

4.0.0-prerelease.9daf370.23

4 years ago

4.0.0-prerelease.e668828.22

4 years ago

4.0.0-prerelease.da2d967.21

4 years ago

3.6.1-next.14

4 years ago

4.0.0-prerelease.5f48600.20

4 years ago

3.7.0

4 years ago

4.0.0-prerelease.baf5748.18

4 years ago

4.0.0-prerelease.c1d3fa5.19

4 years ago

4.0.0-prerelease.ba8e51e.17

4 years ago

3.6.1-next.13

4 years ago

4.0.0-prerelease.f1e1a93.16

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago