form-control

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

51,954

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

25 KB

Provides context such as filled/focused/error/required for form inputs.

2 contributors

Install form-control as a package?

Copied

npm i @bit/mui-org.material-ui.form-control

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

Provides context such as filled/focused/error/required for form inputs. Relying on the context provides high flexibility and ensures that the state always stays consistent across the children of the FormControl. This context is used by the following components:

FormLabel
FormHelperText
Input
InputLabel

You can find one composition example below and more going to the demos.

<FormControl>
  <InputLabel htmlFor="my-input">Email address</InputLabel>
  <Input id="my-input" aria-describedby="my-helper-text" />
  <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
</FormControl>

⚠️Only one input can be used within a FormControl. Demos:

API:

FormControl API

FormLabel
FormHelperText
Input
InputLabel

You can find one composition example below and more going to the demos.

<FormControl>
<InputLabel htmlFor="my-input">Email address</InputLabel>
<Input id="my-input" aria-describedby="my-helper-text" />
<FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
</FormControl>

⚠️Only one input can be used within a FormControl.

Properties

Name	Type	Description
children	`node`	The contents of the form control.
classes (required)	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`
color	`'primary' \| 'secondary'`	The color of the component. It supports those theme colors that make sense for this component.
component	`elementType`	The component used for the root node. Either a string to use a DOM element or a component.
disabled	`bool`	If `true`, the label, input and helper text should be displayed in a disabled state.
error	`bool`	If `true`, the label should be displayed in an error state.
focused	`bool`	If `true`, the component will be displayed in focused state.
fullWidth	`bool`	If `true`, the component will take up the full width of its container.
hiddenLabel	`bool`	If `true`, the label will be hidden. This is used to increase density for a `FilledInput`. Be sure to add `aria-label` to the `input` element.
margin	`'none' \| 'dense' \| 'normal'`	If `dense` or `normal`, will adjust vertical spacing of this and contained components.
required	`bool`	If `true`, the label will indicate that the input is required.
size	`'small' \| 'medium'`	The size of the text field.
variant	`'standard' \| 'outlined' \| 'filled'`	The variant to use.