ToggleButtonGroup

`ToggleButtonGroup` allows you to make a single choice out of the number of options provided. This is similar to the [ChoiceList](/docs/api/checkout-ui-extensions/components/forms/choicelist) component, but without controls such as checkbox or radio button. You can utilize our layout components to arrange `ToggleButtonGroup`.

import {
  reactExtension,
  BlockStack,
  InlineLayout,
  Text,
  ToggleButton,
  ToggleButtonGroup,
  View,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <ToggleButtonGroup
      value="none"
      onChange={(value) => {
        console.log(
          `onChange event with value: ${value}`,
        );
      }}
    >
      <InlineLayout spacing="base">
        <ToggleButton id="none">
          <View
            blockAlignment="center"
            inlineAlignment="center"
            minBlockSize="fill"
          >
            None
          </View>
        </ToggleButton>
        <ToggleButton id="points-100">
          <BlockStack
            inlineAlignment="center"
            spacing="none"
          >
            <Text>100</Text>
            <Text appearance="subdued">
              points
            </Text>
          </BlockStack>
        </ToggleButton>
        <ToggleButton id="points-200">
          <BlockStack
            inlineAlignment="center"
            spacing="none"
          >
            <Text>200</Text>
            <Text appearance="subdued">
              points
            </Text>
          </BlockStack>
        </ToggleButton>
        <ToggleButton id="points-300">
          <BlockStack
            inlineAlignment="center"
            spacing="none"
          >
            <Text>300</Text>
            <Text appearance="subdued">
              points
            </Text>
          </BlockStack>
        </ToggleButton>
      </InlineLayout>
    </ToggleButtonGroup>
  );
}

import {
  extension,
  ToggleButtonGroup,
  ToggleButton,
  InlineLayout,
  View,
  BlockStack,
  Text,
} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const toggleButtonGroup = root.createComponent(
    ToggleButtonGroup,
    {
      value: 'none',
      onChange: (value) => {
        console.log(`onChange event with value: ${value}`);
      },
    },
    [
      root.createComponent(InlineLayout, {spacing: 'base'}, [
        root.createComponent(
          ToggleButton,
          {id: 'none'},
          root.createComponent(
            View,
            {
              blockAlignment: 'center',
              inlineAlignment: 'center',
              minBlockSize: 'fill',
            },
            'None',
          ),
        ),
        root.createComponent(
          ToggleButton,
          {id: 'points-100'},
          root.createComponent(
            BlockStack,
            {inlineAlignment: 'center', spacing: 'none'},
            [
              root.createComponent(Text, undefined, '100'),
              root.createComponent(Text, {appearance: 'subdued'}, 'points'),
            ],
          ),
        ),
        root.createComponent(
          ToggleButton,
          {id: 'points-200'},
          root.createComponent(
            BlockStack,
            {inlineAlignment: 'center', spacing: 'none'},
            [
              root.createComponent(Text, undefined, '200'),
              root.createComponent(Text, {appearance: 'subdued'}, 'points'),
            ],
          ),
        ),
        root.createComponent(
          ToggleButton,
          {id: 'points-300'},
          root.createComponent(
            BlockStack,
            {inlineAlignment: 'center', spacing: 'none'},
            [
              root.createComponent(Text, undefined, '300'),
              root.createComponent(Text, {appearance: 'subdued'}, 'points'),
            ],
          ),
        ),
      ]),
    ],
  );

  root.appendChild(toggleButtonGroup);
});

ToggleButtonGroupProps

ToggleButtonGroupProps

disabled

Whether the button group is disabled.

onChange

A callback that is run whenever one of the buttons is pressed. This callback is called with a string or array of strings indicating the ids of buttons that should now be selected. When this component is [controlled](https://reactjs.org/docs/forms.html#controlled-components), you must store this value in state and reflect it back in the `value` prop.

value

An id of the selected button.

Related

• ToggleButton

Examples

`ToggleButtonGroup` allows you to make a single choice out of the number of options provided. This is similar to the [ChoiceList](/docs/api/checkout-ui-extensions/components/forms/choicelist) component, but without controls such as checkbox or radio button. You can utilize our layout components to arrange `ToggleButtonGroup`.

The ToggleButtonGroup component is ideal for a small set of options. It allows for easy scanning of available choices. Also the component’s big tap target makes it a good choice for enhanced mobile experience. However, in a grid layout, having more than 6 ToggleButtons can get overwhelming and take up too much vertical space. When there are more than 6 choices, consider using the [Select](/docs/api/checkout-ui-extensions/components/forms/select) component instead.

import {
  reactExtension,
  Grid,
  ToggleButton,
  ToggleButtonGroup,
  View,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <ToggleButtonGroup
      value="time-9am"
      onChange={(value) => {
        console.log(
          `onChange event with value: ${value}`,
        );
      }}
    >
      <Grid
        columns={['auto', 'auto', 'auto']}
        spacing="base"
      >
        <ToggleButton id="time-9am">
          <View inlineAlignment="center">
            9:00 AM
          </View>
        </ToggleButton>
        <ToggleButton id="time-10am">
          <View inlineAlignment="center">
            10:00 AM
          </View>
        </ToggleButton>
        <ToggleButton id="time-11am">
          <View inlineAlignment="center">
            11:00 AM
          </View>
        </ToggleButton>
        <ToggleButton id="time-1pm">
          <View inlineAlignment="center">
            1:00 PM
          </View>
        </ToggleButton>
        <ToggleButton id="time-2pm">
          <View inlineAlignment="center">
            2:00 PM
          </View>
        </ToggleButton>
        <ToggleButton id="time-3pm">
          <View inlineAlignment="center">
            3:00 PM
          </View>
        </ToggleButton>
      </Grid>
    </ToggleButtonGroup>
  );
}

import {
  extension,
  Grid,
  ToggleButtonGroup,
  ToggleButton,
  View,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const toggleButtonGroup =
      root.createComponent(
        ToggleButtonGroup,
        {
          value: 'time-9am',
          onChange: (value) => {
            console.log(
              `onChange event with value: ${value}`,
            );
          },
        },
        [
          root.createComponent(
            Grid,
            {
              columns: ['auto', 'auto', 'auto'],
              spacing: 'base',
            },
            [
              root.createComponent(
                ToggleButton,
                {id: 'time-9am'},
                root.createComponent(
                  View,
                  {inlineAlignment: 'center'},
                  '9:00 AM',
                ),
              ),
              root.createComponent(
                ToggleButton,
                {id: 'time-10am'},
                root.createComponent(
                  View,
                  {inlineAlignment: 'center'},
                  '10:00 AM',
                ),
              ),
              root.createComponent(
                ToggleButton,
                {id: 'time-11am'},
                root.createComponent(
                  View,
                  {inlineAlignment: 'center'},
                  '11:00 AM',
                ),
              ),
              root.createComponent(
                ToggleButton,
                {id: 'time-1pm'},
                root.createComponent(
                  View,
                  {inlineAlignment: 'center'},
                  '1:00 PM',
                ),
              ),
              root.createComponent(
                ToggleButton,
                {id: 'time-2pm'},
                root.createComponent(
                  View,
                  {inlineAlignment: 'center'},
                  '2:00 PM',
                ),
              ),
              root.createComponent(
                ToggleButton,
                {id: 'time-3pm'},
                root.createComponent(
                  View,
                  {inlineAlignment: 'center'},
                  '3:00 PM',
                ),
              ),
            ],
          ),
        ],
      );

    root.appendChild(toggleButtonGroup);
  },
);

import {
  reactExtension,
  Grid,
  ToggleButton,
  ToggleButtonGroup,
  View,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <ToggleButtonGroup
      value="time-9am"
      onChange={(value) => {
        console.log(
          `onChange event with value: ${value}`,
        );
      }}
    >
      <Grid
        columns={['auto', 'auto', 'auto']}
        spacing="base"
      >
        <ToggleButton id="time-9am">
          <View inlineAlignment="center">
            9:00 AM
          </View>
        </ToggleButton>
        <ToggleButton id="time-10am">
          <View inlineAlignment="center">
            10:00 AM
          </View>
        </ToggleButton>
        <ToggleButton id="time-11am">
          <View inlineAlignment="center">
            11:00 AM
          </View>
        </ToggleButton>
        <ToggleButton id="time-1pm">
          <View inlineAlignment="center">
            1:00 PM
          </View>
        </ToggleButton>
        <ToggleButton id="time-2pm">
          <View inlineAlignment="center">
            2:00 PM
          </View>
        </ToggleButton>
        <ToggleButton id="time-3pm">
          <View inlineAlignment="center">
            3:00 PM
          </View>
        </ToggleButton>
      </Grid>
    </ToggleButtonGroup>
  );
}

import {
  extension,
  Grid,
  ToggleButtonGroup,
  ToggleButton,
  View,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const toggleButtonGroup =
      root.createComponent(
        ToggleButtonGroup,
        {
          value: 'time-9am',
          onChange: (value) => {
            console.log(
              `onChange event with value: ${value}`,
            );
          },
        },
        [
          root.createComponent(
            Grid,
            {
              columns: ['auto', 'auto', 'auto'],
              spacing: 'base',
            },
            [
              root.createComponent(
                ToggleButton,
                {id: 'time-9am'},
                root.createComponent(
                  View,
                  {inlineAlignment: 'center'},
                  '9:00 AM',
                ),
              ),
              root.createComponent(
                ToggleButton,
                {id: 'time-10am'},
                root.createComponent(
                  View,
                  {inlineAlignment: 'center'},
                  '10:00 AM',
                ),
              ),
              root.createComponent(
                ToggleButton,
                {id: 'time-11am'},
                root.createComponent(
                  View,
                  {inlineAlignment: 'center'},
                  '11:00 AM',
                ),
              ),
              root.createComponent(
                ToggleButton,
                {id: 'time-1pm'},
                root.createComponent(
                  View,
                  {inlineAlignment: 'center'},
                  '1:00 PM',
                ),
              ),
              root.createComponent(
                ToggleButton,
                {id: 'time-2pm'},
                root.createComponent(
                  View,
                  {inlineAlignment: 'center'},
                  '2:00 PM',
                ),
              ),
              root.createComponent(
                ToggleButton,
                {id: 'time-3pm'},
                root.createComponent(
                  View,
                  {inlineAlignment: 'center'},
                  '3:00 PM',
                ),
              ),
            ],
          ),
        ],
      );

    root.appendChild(toggleButtonGroup);
  },
);