form

v0.0.44

v0.0.43

v0.0.42

v0.0.41

v0.0.40

v0.0.39

v0.0.38

v0.0.37

v0.0.36

v0.0.35

v0.0.34

v0.0.33

v0.0.32

v0.0.31

v0.0.30

v0.0.29

v0.0.28

v0.0.27

v0.0.26

v0.0.25

v0.0.24

v0.0.23

v0.0.22

v0.0.21

v0.0.20

v0.0.19

v0.0.18

v0.0.17

v0.0.16

v0.0.15

v0.0.14

v0.0.13

v0.0.12

v0.0.11

v0.0.10

v0.0.9

v0.0.8

v0.0.7

v0.0.6

v0.0.5

v0.0.4

v0.0.3

v0.0.2

v0.0.1

STATUS

Passing

DOWNLOADS

648

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

39 KB

React

Styled Components

2 contributors

Install form as a package?

Copied

npm i @bit/dastag.ui-components.form

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';

Properties

Name	Type	Default value
children	`node`	`null`
className	`string`	`''`
checkboxClassName	`string`	`''`
name (required)	`string`
label	`string`	`''`
labelWOMarker	`bool`	`false`
disabled	`bool`	`false`
rules	`object`	`{}`
onChangeHandler	`function`	`() => {}`
borderColor	`string`	`'#000000'`
borderRadius	`string`	`'0px'`
bgColor	`string`	`'#000000'`
checkColor	`string`	`'#ffffff'`
size	`string`	`'2rem'`
className	`string`	`''`
inputClassName	`string`	`''`
name (required)	`string`
label	`string`	`''`
labelWOMarker	`bool`	`false`
inputType	`string`	`'text'`
placeholder	`string`	`''`
disabled	`bool`	`false`
rules	`object`	`{}`
onChange	`function`	`() => {}`
onBlur	`function`	`() => {}`
isDate	`bool`	`false`
isExpire	`bool`	`false`
className	`string`	`''`
inputClassName	`string`	`''`
name (required)	`string`
label	`string`	`''`
labelWOMarker	`bool`	`false`
placeholder	`string`	`''`
disabled	`bool`	`false`
rules	`object`	`{}`
height	`string`	`'100%'`
onChange	`function`	`() => {}`
onFocus	`function`	`() => {}`
onBlur	`function`	`() => {}`
defaultValue	`number`	`0`
max	`number`	`99`
min	`number`	`0`
upIcon	`node`	`null`
focusColor	`string`	`'#000000'`
blurColor	`string`	`'#000000'`
downIcon	`node`	`null`
actionsBgColor	`string`	`'gray'`
borderErrorColor	`string`	`'red'`
borderRadius	`string`	`'0'`
additionalErrorMsg	`string`	`''`
extraRef	`object`	`null`
className	`string`	`''`
name	`string`	`''`
label	`string`	`''`
required	`bool`	`false`
withoutMarker	`bool`	`false`
disabled	`bool`	`false`
className	`string`	`''`
selectClassName	`string`	`''`
name (required)	`string`
label	`string`	`''`
labelWOMarker	`bool`	`false`
placeholder	`string`	`''`
disabled	`bool`	`false`
rules	`object`	`{}`
options	`array`	`[]`
defaultValue	`object`	`null`
customStyles	`object`	`{}`
customTheme	`object`	`{}`
customDropdownIcon	`node`	`null`
customDropdownColor	`string`	`'var(--select-primary-color)'`
onChange	`function`	`() => {}`
noOptionsMessage	`string`	`''`
className	`string`	`''`
message	`string`	`''`