@leafygreen-ui/text-input
leafyGreen UI Kit Text Input
Last updated 5 days ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/text-input 
SYNC missed versions from official npm registry.

Text Input

npm (scoped)

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/text-input

NPM

npm install @leafygreen-ui/text-input

Peer Dependencies

Package Version
@leafygreen-ui/leafygreen-provider ^1.1.0

Example

import TextInput from '@leafygreen-ui/text-input';

const [value, setValue] = useState('');

return (
  <TextInput
    label="Email"
    description="Enter your email below"
    placeholder="your.email@example.com"
    onChange={event => {
      /* Something to handle the change event */
    }}
    value={value}
  />
);

Output HTML

<div class="leafygreen-ui-4t2zpc">
  <label for="text-input-2604213" class="leafygreen-ui-1ie388"> Email </label>
  <p class="leafygreen-ui-1vlu192">Enter your email below</p>
  <div class="leafygreen-ui-lzja97">
    <input
      data-leafygreen-ui="input-selector"
      class="leafygreen-ui-86cw8t"
      type="text"
      required=""
      placeholder="your.email@example.com"
      id="text-input-2604213"
      value=""
    />
    <div data-leafygreen-ui="icon-selector" class="leafygreen-ui-m329s1"></div>
    <div class="leafygreen-ui-1andb55"></div>
  </div>
</div>

Properties

Prop Type Description Default
id string id associated with the TextInput component.
label string Text shown in bold above the input element.
description string Text that gives more detail about the requirements for the input.
optional boolean Marks the input as optional false
disabled boolean Disabled the input false
onChange function The event handler function for the 'onchange' event. Accepts the change event object as its argument and returns nothing.
placeholder string The placeholder text shown in the input field before the user begins typing.
errorMessage string Text that gives more detail about the requirements for the input.
state 'none', 'valid', 'error' Describes the state of the TextInput element before and after the input has been validated 'none'
value string Sets the HTML value attribute. ''
className string Adds a className to the class attribute. ''
type 'email', 'password', 'search', 'text', 'url', 'tel' Sets type for TextInput 'text'
darkMode boolean Determines whether or not the component will appear in dark mode. false
... native input attributes Any other props will be spread on the root input element

Special Case: Aria Labels

Either label or aria-labelledby must be provided a string, or there will be a console error. This is to ensure that screenreaders have a description for what the Text Input does.

Current Tags

  • 5.0.6                                ...           latest (5 days ago)

26 Versions

  • 5.0.6                                ...           5 days ago
  • 5.0.5                                ...           12 days ago
  • 5.0.4                                ...           a month ago
  • 5.0.3                                ...           a month ago
  • 5.0.2                                ...           a month ago
  • 5.0.1                                ...           a month ago
  • 5.0.0                                ...           a month ago
  • 4.2.0                                ...           2 months ago
  • 4.1.1                                ...           2 months ago
  • 4.1.0                                ...           3 months ago
  • 4.0.1                                ...           3 months ago
  • 4.0.0                                ...           3 months ago
  • 3.0.4                                ...           5 months ago
  • 3.0.3                                ...           5 months ago
  • 3.0.2                                ...           6 months ago
  • 3.0.1                                ...           6 months ago
  • 3.0.0                                ...           6 months ago
  • 2.0.0                                ...           7 months ago
  • 1.1.2                                ...           7 months ago
  • 1.1.1                                ...           7 months ago
  • 1.1.0                                ...           8 months ago
  • 1.0.4                                ...           9 months ago
  • 1.0.3                                ...           10 months ago
  • 1.0.2                                ...           10 months ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 20
Last Day 0
Last Week 11
Last Month 73
Dev Dependencies (0)
None

Copyright 2014 - 2016 © taobao.org |