Introduction

The Group component identifies a group of inputs/elements and implements the group WAI-ARIA role.

A group is commonly used to switch between predefined options (usually up to 4) such as views of data, or to combine inputs and buttons for composing more complex searching or filtering components.

Design guidelines

While the Group component does not set a default size, we recommend maintaining a consistent height between each of the inputs or elements rendered beneath.

Basic

jsx

function BasicGroupExample() {
  const options = React.useMemo(
    () => [
      { label: 'Hourly', value: 'hourly' },
      { label: 'Daily', value: 'daily' },
      { label: 'Monthly', value: 'monthly' },
    ],
    []
  )
  const [selectedValue, setSelectedValue] = React.useState('daily')

  return (
    <Group>
      {options.map(({ label, value }) => (
        <Button key={label} isActive={selectedValue === value} onClick={() => setSelectedValue(value)}>
          {label}
        </Button>
      ))}
    </Group>
  )
}

Small Group example

The Group component will clone the provided size onto child components for a consistent visual style.

jsx

function SmallGroupExample() {
  const options = React.useMemo(
    () => [
      { label: 'Hourly', value: 'hourly' },
      { label: 'Daily', value: 'daily' },
      { label: 'Monthly', value: 'monthly' },
    ],
    []
  )
  const [selectedValue, setSelectedValue] = React.useState('daily')

  return (
    <Group size="small">
      {options.map(({ label, value }) => (
        <Button key={label} isActive={selectedValue === value} onClick={() => setSelectedValue(value)}>
          {label}
        </Button>
      ))}
    </Group>
  )
}

TextInput and Button example

jsx

function TextInputAndButtonExample() {
  const [isLoading, setIsLoading] = React.useState(false)
  const handleClick = React.useCallback(() => {
    setIsLoading(true)
    setTimeout(() => setIsLoading(false), 1000)
  }, [])
  return (
    <Group>
      <TextInput disabled={isLoading} placeholder="Search by name, email, id..." />
      <IconButton disabled={isLoading} icon={isLoading ? Spinner : SearchIcon} onClick={handleClick} />
    </Group>
  )
}