HomeStarbucks Pattern Library

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>

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>