Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
128 lines (95 sloc) 3.92 KB

import Example from '../../components/example'; import API from '../../components/api'; import Layout from '../../components/layout';

import BasicControlled from 'examples/input/basic-controlled.js'; import Sizes from 'examples/input/sizes.js'; import AvailableStates from 'examples/input/available-states.js'; import Enhancers from 'examples/input/enhancers.js'; import BeforeAfter from 'examples/input/before-after.js'; import Mask from 'examples/input/mask.js'; import Customization from 'examples/input/overrides.js'; import Focus from 'examples/input/focus.js'; import WithTags from 'examples/input/with-tags.js'; import Clearable from 'examples/input/clearable.js'; import Password from 'examples/input/password.js'; import BasicUncontrolled from 'examples/input/basic-uncontrolled.js';

import Overrides from '../../components/overrides'; import Yard from '../../components/yard/yard'; import {StatefulInput} from 'baseui/input'; import * as InputExports from 'baseui/input';

export default Layout;

Input

An input enables a person to type in text information.

When to use

  • When a person should provide information to the application.

Examples

When clearable is true, pressing the Escape key or clicking the clear icon on the right will clear the input's current value. Other input components such as Textarea, PhoneInput, and PaymentCard also respect the clearable property.

Input has some built-in logic when you set type to "password". A button is added to the right side of the input which, when activated, toggles the masking of the inputʼs current text. Allowing users to see the text they have entered is considered a usability best practice so we have built-in this behavior.

If you want to opt-out of this behavior, you can override the toggle with a null component:

<Password
  overrides={{
    MaskToggleButton: () => null,
  }}
/>

You can also use overrides to customize the icons used in the toggle:

<Password
  overrides={{
    MaskToggleHideIcon: () => '🙈',
    MaskToggleShowIcon: () => '🐵',
  }}
/>

Note, if all you want to do is change the icons, you could update your theme instead.

In the example above we use overrides to add "tag" functionality to our input. Type a phrase and press enter to create a new tag. Use backspace to remove tags.

<Example title="Stateful (uncontrolled) usage" path="input/basic-uncontrolled.js"

As with many of our components, there is also an uncontrolled version, StatefulInput, which manages its own state.

You can’t perform that action at this time.