FormField

Use as a child of <Form />. It wraps berlitz form field elements.

Installation

yarn add @berlitz/form-field

Props

| Argument | Type | Required | Default | Notes | | --------------------- | ------ | -------- | ----------------- | ------------------------------------------------------------------------------------------ | | children | node | ✅ | | Form field element | | hideLabel | bool | ❌ | false | Hides the label associated with the form element but is still accessible to screen readers | | disableMargin | bool | ❌ | false | Disables margin below component | | invalid | bool | ❌ | false | Indicates that the value of the element is valid | | label | string | ✅ | | Defines the label for the form field. Required even when the label is hidden | | required | bool | ❌ | false | Marks the form field as required | | validationMessage | string | ❌ | '' | Provides help text associated with validation | | validationMessageLeft | bool | ❌ | false | Moves validation message to left | | light | bool | ❌ | false | Renders text in white for dark background | | id | string | ❌ | generated shortid | Specify ID for the input value and it's label's htmlFor |

Usage

import FormField from '@berlitz/form-field'
;<Form>
  <FormField label="Fistname">
    <Input name="first-name" type="text" />
  </FormField>
</Form>