HomeStarbucks Pattern Library



A form field with validation support.


  • 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

Example: Mutliple fields arranged vertically