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

form-field

v2.6.5arrow_drop_down
v2.6.5
v2.5.5
STATUS
Passing
DOWNLOADS
92
LICENSE
Apache 2.0
VISIBILITY
Public
PUBLISHED
7 months ago
SIZE
44 KB
A single field in a form. FormField wraps an input component with
1 contributor
Use form-field in your project ?
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
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
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

function

error

Any error text describing issues with the field

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

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

pad

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

boolean

required

Whether the field is required.

boolean

validate

Validation rule. Provide a regular expression or a function. 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.

{
  regexp: object,
  message: string
}
function

Intrinsic element

div