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>;