HomeStarbucks Pattern Library



EditField supports a callback that allows a consumer to provide any custom mechanism for populating a list of values in a field-like element. It is not a text-editable field component, but appears visually similar to one.


  • buttonLabelany

    Text or element used as the label for the EditField button. Defaults to 'Edit'. This value should be screen reader friendly, so it may make sense to use the hiddenVisually class to provide extra context on the button. For example:

    buttonLabel={ (
       Edit <span className='hiddenVisually'>milk options</span>
    ) }
  • childrennode*

    Text or element passed to a child component to form a "label" that is actually just a span

  • containerPropsobject

    Props applied to the field's outer container.

  • floatLabelAriaHiddenbool
  • idstring
  • listPropsobject

    Props applied to the list element.

  • onClickfunc*

    A custom function that will update or populate the listed values. Clicks are handled by the wrapper div, so that the user may click anywhere in the field (not just on the button).

  • listItemsarray

    An array of elements or strings rendered inside html list item elements. When present, the FloatLabel will shift into its active position.

<div style={{ width: '343px' }}>
<p className="pb3">
<em>With no list items:</em>
containerProps={{ className: 'mb9' }}
listProps={{ 'data-e2e': 'myTest' }}
onClick={() => {
alert('Button Clicked!');
Fill me in
<p className="pb3">
<em>With list items:</em>
'No foam',
'Truncate this really long name for me please',
listProps={{ id: 'foo' }}
onClick={() => {
alert('Hey stop it!');