Chip

Chips are compact elements that represent an input, attribute, or action.

Chips allow users to enter information, make selections, filter content, or trigger actions.

While included here as a standalone component, the most common use will be in some form of input, so some of the behavior demonstrated here is not shown in context.

Use <ChipDelete> as an adornment to add an accessible delete button. A onDelete callback is provided that runs when <ChipDelete> is clicked, and additionally when the Backspace or Delete keys are pressed while focused.

Photography

Nature

<Chip
  label="Photography"
  color="secondary"
  endAdornment={<ChipDelete onDelete={() => alert('"Photography" deleted')} />}
/>
<Chip
  label="Nature"
  variant="outlined"
  color="primary"
  endAdornment={<ChipDelete onDelete={() => alert('"Nature" deleted')} />}
/>

<Chip
  label="Photography"
  color="secondary"
  endAdornment={<ChipDelete onDelete={() => alert('"Photography" deleted')} />}
/>
<Chip
  label="Nature"
  variant="outlined"
  color="primary"
  endAdornment={<ChipDelete onDelete={() => alert('"Nature" deleted')} />}
/>

Press Enter to start editing

Actions

Pass <ChipButton> or <ChipLink> to the action prop to create interactive chips.

ChipButton

Use <ChipButton> for triggering actions:

<Chip
  label="Assign"
  startAdornment={<PersonAddIcon />}
  action={<ChipButton onClick={() => {}} />}
/>
<Chip
  label="Reset"
  variant="outlined"
  color="primary"
  endAdornment={<LoopIcon />}
  action={<ChipButton onClick={() => {}} />}
/>

<Chip
  label="Assign"
  startAdornment={<PersonAddIcon />}
  action={<ChipButton onClick={() => {}} />}
/>
<Chip
  label="Reset"
  variant="outlined"
  color="primary"
  endAdornment={<LoopIcon />}
  action={<ChipButton onClick={() => {}} />}
/>

Press Enter to start editing

ChipLink

Use <ChipLink> to navigate to a URL:

Alex Chen

Documentation

<Chip
  label="Alex Chen"
  startAdornment={<Avatar alt="Alex Chen">A</Avatar>}
  action={<ChipLink href="#" />}
/>
<Chip
  label="Documentation"
  endAdornment={<OpenInNewIcon />}
  action={<ChipLink href="#" />}
/>

<Chip
  label="Alex Chen"
  startAdornment={<Avatar alt="Alex Chen">A</Avatar>}
  action={<ChipLink href="#" />}
/>
<Chip
  label="Documentation"
  endAdornment={<OpenInNewIcon />}
  action={<ChipLink href="#" />}
/>

Press Enter to start editing

ChipDelete

<ChipDelete> cam be used to make interactive chips deletable. Both the action component and the delete button are discrete tab stops.

Movies

<Chip
  label="Music"
  endAdornment={<ChipDelete />}
  action={<ChipButton onClick={() => {}} />}
/>
<Chip
  label="Movies"
  endAdornment={<ChipDelete />}
  action={<ChipLink href="#" />}
/>

<Chip
  label="Music"
  endAdornment={<ChipDelete />}
  action={<ChipButton onClick={() => {}} />}
/>
<Chip
  label="Movies"
  endAdornment={<ChipDelete />}
  action={<ChipLink href="#" />}
/>

Press Enter to start editing

Disabled state

Both <ChipButton> and <ChipDelete> can receive focus normally when disabled to remain discoverable to assistive technology, which typically ignores disabled elements. Only focus and blur events will run. This can be individually disabled by with focusableWhenDisabled={false}.

<Chip
  label="Focusable"
  disabled
  endAdornment={<ChipDelete />}
  action={<ChipButton onClick={() => {}} />}
/>
<Chip
  label="Not focusable"
  disabled
  endAdornment={<ChipDelete focusableWhenDisabled={false} />}
  action={<ChipButton onClick={() => {}} focusableWhenDisabled={false} />}
/>

<Chip
  label="Focusable"
  disabled
  endAdornment={<ChipDelete />}
  action={<ChipButton onClick={() => {}} />}
/>
<Chip
  label="Not focusable"
  disabled
  endAdornment={<ChipDelete focusableWhenDisabled={false} />}
  action={<ChipButton onClick={() => {}} focusableWhenDisabled={false} />}
/>

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

Chip

Basic chips

Colors

Sizes

Adornments

Delete button

Actions

ChipButton

ChipLink

ChipDelete

Disabled state

API