Form Pill Group

A Form Pill Group is an editable set of Pills that represent a collection of selectable or removable objects.

Installation

yarn add @twilio-paste/form-pill-group - or - yarn add @twilio-paste/core

Usage

import {useFormPillState, FormPillGroup, FormPill} from '@twilio-paste/core/form-pill-group';
import {ProductVideoIcon} from '@twilio-paste/icons/esm/ProductVideoIcon';
import {ProductVerifyIcon} from '@twilio-paste/icons/esm/ProductVerifyIcon';

export const BasicFormPillGroup = () => {
  const pillState = useFormPillState();

  return (
    <form>
      <FormPillGroup {...pillState} aria-label="Products:">
        <FormPill {...pillState}>Voice</FormPill>
        <FormPill {...pillState}>
          <ProductVideoIcon decorative />
          Video
        </FormPill>
        <FormPill {...pillState}>
          <ProductVerifyIcon decorative />
          Verify
        </FormPill>
      </FormPillGroup>
    </form>
  );
};

Props

FormPillStateReturn

Inherited props

FormPillInitialState

Inherited props

FormPill

disabled

Set if a pill is disabled

Type: boolean

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: any
Default: 'FORM_PILL'

i18nErrorLabel

Alternative text for the error icon in the error variant

Type: string
Default: '(error)'

onBlur

Event handler called when a pill is blurred

Type: () => void

onDismiss

Event handler called when a pill is dismissed

Type: ( event: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element> ) => void

onFocus

Event handler called when a pill is focused

Type: () => void

onSelect

Event handler called when a pill is selected

Type: ( event: MouseEvent<HTMLButtonElement, MouseEvent> ) => void

selected

Set if a pill is in a selected state

Type: boolean

variant

Sets the variant of the pill

Type: PillVariant
Default: 'default'

Inherited props

FormPillGroup

aria-label RequiredRequired

Type: string

display

Determines if the FormPillGroup should be rendered as a flex or inline-flex container

Type: "flex" | "inline-flex"

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: any
Default: 'FORM_PILL_GROUP'

i18nKeyboardControls

Visually hidden string that has instructions for how to remove and select pills with a keyboard.

Type: string
Default: 'Press Delete or Backspace to remove. Press Enter to toggle selection.'