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

form-field

v2.11.1arrow_drop_down
v2.11.1
v2.6.5
v2.5.5
STATUS
Passing
DOWNLOADS
182
LICENSE
Apache 2.0
VISIBILITY
Public
PUBLISHED
A month ago
SIZE
43 KB
A single field in a form. FormField wraps an input component with
2 contributors
Install form-field as a package?
Copied
npm i @bit/grommet.grommet.form-field
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
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';
toggle layout
chevron_left
chevron_right

FormField

A single field in a form. FormField wraps an input component with a label, help, and/or error messaging. It typically contains an input control like TextInput, TextArea, Select, etc.

Usage

import { FormField } from 'grommet';
<FormField />

Properties

component

The component to insert in the FormField. Grommet will add update the form values when this field changes. Any additional properties (such as initial value) you pass to FormField will be forwarded to this component. The component may be custom as long it supports the properties of name, value, onChange (event => {}), while event has either event.value or event.target.value.

function
object

disabled

Whether the field should look disabled.

boolean

error

Any error text describing issues with the field’s value

string
node

help

Any help text describing how the field works

string
node

htmlFor

The id of the input element contained in this field

string

info

Any informational text regarding the field’s value

string
node

label

A short label describing the field

string
node

name

The name of the value data when in a Form and the name of the input field.

string

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

none
xxsmall
xsmall
small
medium
large
xlarge
{
  bottom: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  end: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  horizontal: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  left: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  right: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  start: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  top: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  vertical: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string
}
string

pad

Whether to add padding to align with the padding of TextInput.

boolean

required

Whether the field is required.

boolean

validate

Validation rule when used within a grommet Form. Provide an object with a regular expression, a function, or an array of these. If a function is provided, it will be called with two arguments, the value for this field and the entire value object. This permits validation to encompass multiple fields. The function should return a string message describing the validation issue, if any, or an object with ‘message’ and ‘status’ properties.

{
  regexp: object,
  message: string,
  status: 
    error
    info
}
function
[
  {
    regexp: object,
    message: string,
    status: 
      error
      info
  }
  function
]

Intrinsic element

div

Theme

formField.border.color

The border color. Expects string | { 'dark': string, 'light': string }.

Defaults to

border

formField.border.error.color

The border color of the error. Expects string | {'dark': string, 'light': string}.

Defaults to

{ dark: 'white', light: 'status-critical' },

formField.border.position

The border position. Expects string.

Defaults to

inner

formField.border.side

The border side of the FormField. Expects string.

Defaults to

bottom

formField.content.pad

The pad of the FormField content. Expects object.

Defaults to

small

formField.disabled.background.color

The color of the FormField background when it is disabled. Expects string | {'dark': string, 'light': string}.

Defaults to

undefined

formField.disabled.background.opacity

The opacity of the FormField background when it is disabled. Expects string | boolean | number.

Defaults to

undefined

formField.error.background.color

The color of the FormField background when there is an error. Expects string | {'dark': string, 'light': string}.

Defaults to

undefined

formField.error.background.opacity

The opacity of the FormField background when there is an error. Expects string | boolean | number.

Defaults to

undefined

formField.error.color

The color of the FormField error. Expects string | {'dark': string, 'light': string}.

Defaults to

status-critical

formField.error.margin

The margin used for the FormField error. Expects string | object.

Defaults to

{ vertical: 'xsmall', horizontal: 'small' }

formField.extend

Any additional style for FormField. Expects string | (props) => {}.

Defaults to

undefined

formField.help.color

The color of the FormField help. Expects string | {'dark': string, 'light': string}.

Defaults to

{ dark: 'dark-3', light: 'dark-3' }

formField.help.margin

The margin for the FormField help. Expects string | object.

Defaults to

{ left: 'small' }

formField.info.color

The color of the FormField info. Expects string | {'dark': string, 'light': string}.

Defaults to

text-xweak

formField.info.margin

The margin used for the FormField info. Expects string | object.

Defaults to

{ vertical: 'xsmall', horizontal: 'small' }

formField.label

Any props of Text that will be applied on the FormField label. Expects object.

Defaults to

undefined

formField.label.margin

The margin for the FormField label. Expects string | object.

Defaults to

{ vertical: 'xsmall', horizontal: 'small' }

formField.margin

The margin of FormField. Expects string | object.

Defaults to

{ bottom: 'small' }

formField.round

The rounding of the FormField. Expects boolean | string | object.

Defaults to

undefined

global.borderSize

The possible border sizes for FormField. Expects object.

Defaults to

{
  xsmall: '1px',
  small: '2px',
  medium: '4px',
  large: '12px',
  xlarge: '24px,
}