Would be great to have a "Toggle Button" component!

[DarrenBaldwin07]

Description

Currently, Chakra has the Switch (https://chakra-ui.com/docs/components/switch) however this has no indicator (label). I would propose adding a new "Toggle Button" component that simply toggles between 2 different states.

Problem Statement/Justification

Refer to description.

Proposed Solution or API

N/A

Alternatives

N/A

Additional Information

Here is a example (via: https://turbo.build):

[CaitlinSweeney]

We had to create a SelectButtonGroup for our app, basically a Button Toggle, and the option to have multiple buttons. Utilizes the chakra button components. It looks something like this and some style tweaking.

import {
  ButtonGroup as CBG,
  ButtonGroupProps,
  forwardRef,
} from '@charka-ui/react';
import React from 'react';

export const ButtonGroup = forwardRef<ButtonGroupProps, 'div'>((props, ref) => {
  const { isAttached, spacing = 2 } = props;
  const styles = {
    flexDirection: { base: 'column', lg: 'row' },
    '& > *:not(style) ~ *:not(style)': {
      marginStart: { base: 0, lg: spacing },
      marginTop: { base: 3, lg: 0 },
    },
  };
  if (!isAttached) {
    return <CBG ref={ref} sx={styles} {...props} />;
  }
  return <CBG ref={ref} {...props} />;
});

const inactiveStyles = {
  color: 'gray.700',
  borderColor: 'gray.100',
  bg: 'gray.100',
  _hover: { bg: 'gray.300' },
  _active: { bg: 'gray.200' },
};

/**
 * @example (
 * <SelectButtonGroup onChange={handleChangeValue} value={value}>
 *  <Button value={value1}>label1</Button>
 *  <Button value={value2}>label2</Button>
 * </SelectButtonGroup>
 * )
 * @note
 * must have multiple child elements
 */
export const SelectButtonGroup: React.FC<{
  onChange: (value: string) => void;
  value: string;
  groupProps?: ButtonGroupProps;
}> = ({ onChange, value, children, groupProps }) => {
  if (!children) throw new Error('Children required');
  // iterate over array of child nodes to apply extended props
  return (
    <ButtonGroup {...groupProps}>
      {React.Children.map(children as React.ReactElement[], CHILD => {
        return React.cloneElement(CHILD, {
          onClick: () => {
            if (value === CHILD?.props?.value) return;
            onChange(CHILD?.props?.value);
          },
          ...(value !== CHILD?.props?.value && { sx: inactiveStyles }),
        });
      })}
    </ButtonGroup>
  );
};

[DarrenBaldwin07]

@CaitlinSweeney Looks great -- I literally just did this too. Just wanted to make a suggestion to get this into the core components because I find myself needing one all the time.

[joaorodrs]

@DarrenBaldwin07 Maybe this would be about adding the possibility of having labels in the already existing switch component?

[spiltbeans]

Hey! I opened a PR to add this feature to the library but I'm looking for some feedback about how the community expects features like onChange and component state should be handled.

If you have any opinions for your use case, please contribute to the discussion in #7866

Thanks!

[Philzen]

I'm in big favor of adding a dedicated Toggle Button component as it's a special type of button whose nuances need to be considered. One important point is accessibility:

• a toggle Button requires aria-pressed-attribute that the current Button types are lacking, see https://www.w3.org/WAI/ARIA/apg/patterns/button/
• the current Button implementation has an a11y problem when using the loading state (isLoading accessibility problem b/c of losing focus #7965)

---

From looking at the topic description i'm not sure everybody is one the same side here. IMHO this is not a "Toggle Button": – it's simply a radio button with a nice UX.

Examples for Toggle Buttons

	aria-pressed="false"	aria-pressed="true"
Mute Microphone
Pause Playback	⏸︎	⏵︎

[spiltbeans]

I'd say the differences from what we're proposing is that the component should support:

• being exclusive (like radio button) or select multiple (unlike radio button)
• holding selected state and handling an onChange event, which the current button group doesn't

It may be worth it to rebrand to joined buttons like DaisyUI but the reason I think of it as a toggle is because of MaterialUI

The implementation for the real toggle button in your comment would be really simple I'm not sure it would be worthwhile making its own component. Something like:

<>
    { pressed ? <MutedMic /> : <UnMutedMic /> }
<>

The loading state is a different problem to solve, but you can resolve the aria problem by adding the aria-pressed prop to the muted/unmuted component.

I'm totally open to hearing if there are more merits to having a dedicated toggle button component as you describe it.

[Philzen]

Just like <IconButton /> makes aria-label a required attribute (for good reason), i believe a dedicated implementation would be helpful, that would then automatically render the aria-pressed-attribute. How that is implemented is a different discussion, could be a dedicated <ToggleButton /> component or a type="toggle" attribute on Button and IconButton.

You're right: tackling the loading state accessibility problem may be a different discussion altogether, as it affects multiple components, such as the component you're proposing here.

It may be worth it to rebrand to joined buttons like DaisyUI but the reason I think of it as a toggle is because of MaterialUI

Looking at the MaterialUI doc you have linked there, those examples are <ToggleButtonGroup />s from looking at the code examples. They group individual <ToggleButton /> – each of which nicely renders an aria-pressed-attribute (which no ChakraUI button currently renders afaik). So effectively, your proposal is to implement
a. <ToggleButton /> and a
b. <ToggleButtonGroup /> (or <JoinedButton />, if you wish to call it that way)

[spiltbeans]

Yeah basically. I have a PR #7866 that does b but I think it's very worth while adding a as part of the PR to enforce the aria attribute.

[fidesachates]

err... so where did we end up on this? Would love this feature.