select

v4.15.0

STATUS

Passing

DOWNLOADS

173

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

5 years ago

SIZE

N/A

Evergreen exports two components to create text inputs: Select: base text input component. Directly maps to a select element. SelectField: combines a label, select and validation message in one. Used for traditional forms.

React

select

select field

1 contributor

Install select as a package?

Copied

npm i @bit/segmentio.evergreen.select

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 dimensions spec from the Box primitivie.

Composes the spacing spec from the Box primitivie.

Composes the position spec from the Box primitivie.

Composes the layout spec from the Box primitivie.

The id attribute for the select.

The name attribute for the select.

The options that are passed to the select.

The initial value of an uncontrolled select

Function called when value changes.

The value of the select.

When true, the select is required.

When true, the select should auto focus.

When true, the select is invalid.

The appearance of the select. The default theme only supports default.

Theme provided by ThemeProvider.

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.