HomeStarbucks Pattern Library

FieldStatus

Notes

Displays validation messages for form fields. Used by default to show errors in components that use the FieldBase (Field, Select).

Props

  • childrennode
  • classNamestring
  • errorbool

    Current error status. Pass true to mark as an error, false to mark that the field is valid, or leave undefined for an indeterminate default state.

<React.Fragment>

  <FieldStatus className="mb3" error>

    Please enter a valid email address

  </FieldStatus>

  <FieldStatus className="mb3" error={false}>

    A positive message can be used!

  </FieldStatus>

  <FieldStatus>

    If error prop is undefined, a bullet character is used instead of an icon

  </FieldStatus>

</React.Fragment>;