text-input

v4.15.0

STATUS

Passing

DOWNLOADS

369

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

5 years ago

SIZE

N/A

The TextInput component is a basic text input component. It directly maps to a input element.

1 contributor

Install text-input as a package?

Copied

npm i @bit/segmentio.evergreen.text-input

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

Composes the Text component as the base.

Makes the input element required.

Makes the input element disabled.

Sets visual styling of only the text input to be "invalid". Note that this does not effect any validationMessage.

Use the native spell check functionality of the browser.

The placeholder text when there is no value present.

The appearance of the TextInput.

The width of the TextInput.

Theme provided by ThemeProvider.

Class name passed to the button. Only use if you know what you are doing.

Properties

Name	Type	Default value	Description
label (required)	`node`		The label used above the input element.
labelFor	`string`		Passed on the label as a htmlFor prop.
isRequired	`bool`		Wether or not show a asterix after the label.
description	`node`		A optional description of the field under the label, above the input element.
hint	`node`		A optional hint under the input element.
validationMessage	`node`		If a validation message is passed it is shown under the input element and above the hint. This is unaffected by `isInvalid`.
inputHeight	`number`	`32`	The height of the input element.
inputWidth	`number \| string`	`'100%'`	The width of the input width.