Field

Notes

A form field with validation support.

Props

childrennode*
Text or element(s) used as children of the field's label element.
classNamestring
containerPropsobject
Props applied to the field's outer container.
customFieldStatusbool
A flag indicating that the field uses a custom element to display field status and should not wrap error messages in a FieldStatus component.
defaultValuestring
displayStatusbool
A flag indicating that the field should display its error message irrespective of the field's error status. If set to true, the error message will display no matter what. If set to false, it will never display.
errorbool[false]
A flag indicating that the field is in an error state.
errorMessagenode
A message to display when the field is in an error state. Wrapped in a FieldStatus component by default.
floatLabelActiveTextstring
Optional text used as field's label element when the the field is in an active state.
floatLabelAriaHiddenbool[false]
Set to true to hide float label text from screen readers
floatLabelIdstring
Optional id to be set on the associated label, can be useful for creating accessibility relationships between elements
floatLabelVisiblebool[true]
Set to false to only show the label when the field does not have a value
idstring*
inputAddonnode
An additional element rendered within the field after the input element. Used to apply extra buttons and labels on the edges of fields.
hintTextnode
Optional hint text to be displayed.
namestring
onChangefunc
onBlurfunc
onFocusfunc
requiredbool
typestring['text']
valuestring

Example: Field - Toggle error prop to true to see error message

<div>
  <div className="p3">
    <Field
      id='email'
      error={ false }
      floatLabelActiveText="Email Address"
      errorMessage='Please enter a valid email address'
      required
    >
      Enter Email Address
    </Field>
  </div>
  <div className="bg-white p3">
    <Field
      id='email_white-bg'
      error={ false }
      floatLabelActiveText="Email Address"
      errorMessage='Please enter a valid email address'
    >
      Enter Email Address
    </Field>
  </div>
  <div className="p3">
    <Field
      id='email_hint_text'
      error={ false }
      floatLabelActiveText="Email Address"
      errorMessage='Please enter a valid email address'
      hintText='A valid email address consists of an email prefix and an email domain'
      required
    >
      Enter Email Address
    </Field>
  </div>
</div>

<div>
  <div className="p3">
    <Field
      id='email'
      error={ false }
      floatLabelActiveText="Email Address"
      errorMessage='Please enter a valid email address'
      required
    >
      Enter Email Address
    </Field>
  </div>
  <div className="bg-white p3">
    <Field
      id='email_white-bg'
      error={ false }
      floatLabelActiveText="Email Address"
      errorMessage='Please enter a valid email address'
    >
      Enter Email Address
    </Field>
  </div>
  <div className="p3">
    <Field
      id='email_hint_text'
      error={ false }
      floatLabelActiveText="Email Address"
      errorMessage='Please enter a valid email address'
      hintText='A valid email address consists of an email prefix and an email domain'
      required
    >
      Enter Email Address
    </Field>
  </div>
</div>

Example: Mutliple fields arranged vertically

<div>
  <Field id='firstNameStacked' className='mb2'>First Name</Field>

  <Field id='lastNameStacked' className='mb2'>Last Name</Field>

  <Field 
    id='emailStacked'
    error={ true }
    errorMessage='Please enter a valid email address'
  >
    Email Address
  </Field>
</div>

<div>
  <Field id='firstNameStacked' className='mb2'>First Name</Field>

  <Field id='lastNameStacked' className='mb2'>Last Name</Field>

  <Field 
    id='emailStacked'
    error={ true }
    errorMessage='Please enter a valid email address'
  >
    Email Address
  </Field>
</div>