EditField

Notes

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.

Props

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={ (
 <span>
   Edit <span className='hiddenVisually'>milk options</span>
 </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>
  </p>
  <EditField
    containerProps={{ className: 'mb9' }}
    listProps={{ 'data-e2e': 'myTest' }}
    id="no_list_items"
    onClick={() => {
      alert('Button Clicked!');
    }}
  >
    Fill me in
  </EditField>

  <p className="pb3">
    <em>With list items:</em>
  </p>
  <EditField
    listItems={[
      'No foam',
      '2%',
      'Truncate this really long name for me please',
    ]}
    listProps={{ id: 'foo' }}
    id="with_list_items"
    onClick={() => {
      alert('Hey stop it!');
    }}
  >
    Milk
  </EditField>
</div>;