Skip to main content
⌘K
Last modified: 4/Oct/2024

Group

A Group is a collection of checkboxes or radio buttons.

#Usage

import { Checkbox, Group } from '@kinsta/stratus'

const MyComponent = () => (
  <Group defaultValue={['empire']}>
    <Checkbox name="team" label="Galactic empire" value="empire" />
    <Checkbox name="team" label="Rebel alliance" value="alliance" />
  </Group>
)

import { Radio, Group } from '@kinsta/stratus'

const MyComponent = () => (
  <Group defaultValue="empire">
    <Radio name="team" label="Galactic empire" value="empire" />
    <Radio name="team" label="Rebel alliance" value="alliance" />
  </Group>
)

import { RadioCard, Group, Icon } from '@kinsta/stratus'

const MyComponent = () => (
  <Group defaultValue="value1">
    <RadioCard value="value1">
      <RadioCard.Content title="Radio Card title" description="Radio Card description" icon={<Icon type="KinstaLogo" />} />
    </RadioCard>
    <RadioCard value="value2">
     <RadioCard.Content title="Radio Card title" description="Radio Card description" />
    </RadioCard>
  </Group>
)

#Props

#defaultValue
string | string[]
Decides which checkboxes or radio are selected initially. The Radio uses a string for default value and the Checkbox uses an array of strings
#value
string | string[]
Decides which checkboxes or radio are selected. The Radio uses a string for values and the Checkbox uses an array of strings
#onChange
(key: string | string[]) => void
The callback that runs when an item changes
#children
Required
ChildType[]
The children can only be Checkbox, Radio or RadioCard components
#layout
"vertical" | "horizontal"
The way the items are displayed - Defaults to vertical
vertical
#errorMessage
string | ReactElement<any, string | JSXElementConstructor<any>>
Renders and error text below the label.

#Types

  • GroupProps: props of the Group component processed by stratus

Read more about types here

#See also