You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

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

Package Overview
Dependencies
7
Maintainers
6
Versions
300
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Canvas styled text input


Version published
Maintainers
6
Created

Readme

Source

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.

TypeDescription
ErrorRed outline with error icon.
AlertYellow 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


Keywords

FAQs

Package last updated on 09 Jul 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc