@berlitz/form-field

FormField component for the Max Design System

Usage no npm install needed!

<script type="module">
  import berlitzFormField from 'https://cdn.skypack.dev/@berlitz/form-field';
</script>

README

FormField npm version

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>