Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

form

v0.86.0arrow_drop_down
v0.86.0
v0.85.0
v0.84.0
STATUS
Passing
DOWNLOADS
2,548
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
7 months ago
SIZE
95 KB
A Form displays a set of related user input fields in a structured way.
1 contributor
Use form in your project ?
Copied
npm i @bit/semantic-org.semantic-ui-react.form
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
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';
revert changes
reload
toggle layout
maximize
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

A Form displays a set of related user input fields in a structured way.

FormButton ()

Sugar for <Form.Field control={Button} />.

FormCheckbox ()

Sugar for <Form.Field control={Checkbox} />.

FormDropdown ()

Sugar for <Form.Field control={Dropdown} />.

A form control component (i.e. Dropdown) or HTML tagName (i.e. ‘input’). Extra FormField props are passed to the control component. Mutually exclusive with children.

A field is a form element containing a label and an input.

A form control component (i.e. Dropdown) or HTML tagName (i.e. ‘input’). Extra FormField props are passed to the control component. Mutually exclusive with children.

FormGroup ()

A set of fields can appear grouped together.

FormInput ()

Sugar for <Form.Field control={Input} />.

FormRadio ()

Sugar for <Form.Field control={Radio} />.

FormSelect ()

Sugar for <Form.Field control={Select} />.

FormTextArea ()

Sugar for <Form.Field control={TextArea} />.

Properties
NameTypeDefault valueDescription
as
customFormField

An element type to render as (string or function).

control
customButton

A FormField control prop.

as
customFormField

An element type to render as (string or function).

control
customCheckbox

A FormField control prop.

as
customFormField

An element type to render as (string or function).

control
customDropdown

A FormField control prop.

as
custom

An element type to render as (string or function).

children
node

Primary content.

className
string

Additional classes.

grouped
custom

Fields can show related choices.

inline
custom

Multiple fields may be inline in a row.

unstackable
bool

A form group can prevent itself from stacking on mobile.

widths
...SUI.WIDTHS | 'equal'

Fields Groups can specify their width in grid columns or automatically divide fields to be equal width.

as
customFormField

An element type to render as (string or function).

control
customInput

A FormField control prop.

as
customFormField

An element type to render as (string or function).

control
customRadio

A FormField control prop.

as
customFormField

An element type to render as (string or function).

control
customSelect

A FormField control prop.

options
{}[]

Array of Dropdown.Item props e.g. { text: '', value: '' }

as
customFormField

An element type to render as (string or function).

control
customTextArea

A FormField control prop.