import { V1ToggleGroup } from '@uhg-abyss/web/ui/ToggleGroup';

Usage

label

errorMessage

subText

borderRadius

display

hideLabel

rounded

() => {
  const [value, setValue] = useState(['sun']);

  console.log('value', value);

  return (
    <V1ToggleGroup
      label="ToggleGroup Sandbox"
      onChange={(val) => setValue(val)}
      value={value}
      subText="This is subtext"
    >
      <V1ToggleGroup.Toggle label="Sun" value="sun" ariaLabel="Sunday"/>
      <V1ToggleGroup.Toggle label="Mon" value="mon" ariaLabel="Monday"/>
      <V1ToggleGroup.Toggle label="Tue" value="tue" ariaLabel="Tuesday"/>
      <V1ToggleGroup.Toggle label="Wed" value="wed" ariaLabel="Wednesday"/>
      <V1ToggleGroup.Toggle label="Thu" value="thu" ariaLabel="Thursday"/>
      <V1ToggleGroup.Toggle label="Fri" value="fri" ariaLabel="Friday"/>
      <V1ToggleGroup.Toggle label="Sat" value="sat" ariaLabel="Saturday"/>
    </V1ToggleGroup>
  );
};

useForm (recommended)

Using useForm and FormProvider simplifies form management by providing out-of-the-box validation, form state handling, and performance optimizations, leveraging the power of react-hook-form.

useState

Using the useState hook gets values from the component state.

Label

Use the label prop to display a label above the toggle group. To hide the label, set hideLabel to true.

Use isRequired for further customization.

Note: If using useForm, do not use isRequired. The same functionality can be achieved with required: true in validators.

Subtext

Use the subText prop to display helpful information related to the toggle group field. The prop accepts either a string or an object of the form:

{
  text: string;
  position: 'above' | 'below';
}

The position property determines where the subtext will be displayed in relation to the toggle group field. The default value is 'below'.

Helper

Use the helper prop to display a help icon next to the label. Simply passing a string value will render the default helper, a Tooltip containing that string. The helper can be customized by passing in a node. It is recommended to use either a Tooltip or a Popover. See When should I use a Tooltip vs. a Popover? for more information on best practices regarding the two.

Error message (useState)

Use the errorMessage prop to display a custom error message below the toggle group field when using useState.

Success message

Form Compatibility

useState

useForm

Use the successMessage prop to display a custom success message below the input field. To provide a single success message across all form input components using useForm/FormProvider, you can provide successMessage to FormProvider as shown here.

Rounded

Use the rounded prop to change the style of the V1ToggleGroup from Rectangle to rounded. The default is squared and set to false.

Border radius

Use the borderRadius prop to set to set the border radius of the container, as well as the selected toggle item. There are two preset values you can use, $md, and $lg, or you can input a custom value. The default value is $md.

Disabled

Set the isDisabled prop to true to disable all toggle items in the group. Individual toggle items can be disabled by setting isDisabled to true in their respective V1ToggleGroup.Toggle instead of the outer component.

Display

Use the display prop to set the direction in which the toggle group appears. The default is set to 'column'.

V1ToggleGroup Props

Name	Type	Default	Required	Description
borderRadius	string | number	'$md'	-	The border radius of the ToggleGroup.
borderRadiuses	{ [key: string]: string | number; }	'{ md: '4px', lg: '100px' }'	-	Custom border radii for different sizes of the ToggleGroup.
children	React.ReactNode	-	-	The content of the ToggleGroup component.
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
display	"row" | "column"	'row'	-	The display style of the ToggleGroup.
errorMessage	string | never	-	-	Error message to display for the input. Only used when not in a FormProvider. errorMessage should not exist in useForm mode.
helper	React.ReactNode	-	-	Helper element next to label
hideLabel	boolean	false	-	If true, the label will be visually hidden
highlighted	boolean	false	-	If true, the input field will be highlighted
isDisabled	boolean	false	-	If true, the input will be disabled
isRequired	boolean | never	-	-	Whether the input is required. Only used when not in a FormProvider. isRequired should not exist in useForm mode.
label	string	-		The label for the input
model	never | string	-	-	model should not exist in useState mode. Model name for form validation. Only used when in a FormProvider.
onBlur	React.FocusEventHandler<HTMLInputElement>	-	-	Callback function executed when the input is blurred
onChange	(value: string[]) => void	-	-	Event handler for the onChange event of the ToggleGroup.
onFocus	React.FocusEventHandler<HTMLInputElement>	-	-	Callback function executed when the input is focused
rounded	boolean	false	-	Whether the ToggleGroup has rounded corners.
subText	string | { text: string; position: SubTextPosition; }	-	-	Additional descriptive text for the input
successMessage	string	-	-	Success message to display for the input
validators	never | RegisterOptions	-	-	validators should not exist in useState mode. Validators for the input. Only used when in a FormProvider.
value	ValueType | never	-	-	The value of the input. Only used when not in a FormProvider. value should not exist in useForm mode.

Below are the link(s) to the relevant GitHub type files:

Abyss.d.ts

FormInput.types.ts

V1ToggleGroup.Toggle Props

Name	Type	Default	Required	Description
ariaLabel	string	-	-	Adds an aria-label to the Toggle. Use when label is an icon or abbreviation.
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
isDisabled	boolean	false	-	If true, the Toggle will be disabled
label	React.ReactNode	-	-	The label for the Toggle
value	string	-		The value of the Toggle

V1ToggleGroup Classes

Class Name	Description
.abyss-

V1ToggleGroup.Toggle Classes

Class Name	Description
.abyss-toggle-root	Toggle root element
.abyss-toggle-main-container	Toggle main element
.abyss-toggle-container	Toggle container for the visual elements
.abyss-toggle-input	Toggle input element
.abyss-toggle-thumb	Toggle thumb indicator
.abyss-toggle-thumb-icon	The icon inside the thumb
.abyss-toggle-label	Toggle label element
.abyss-toggle-sub-text	Toggle sub text element
.abyss-toggle-descriptors	Toggle descriptors root element

At its core, V1ToggleGroup functions like a checkbox group.

A checkbox group is a set of checkable checkboxes, where more than one of the checkboxes can be checked at a time. Some implementations may initialize the set with all checkboxes in the unchecked state in order to force the user to check one or more of the checkboxes before moving past a certain point in the workflow.

Use the ariaLabel prop in V1ToggleGroup.Toggle when using abbreviated words or icons. This will include an "aria-label" for screen readers.

Keyboard Interactions

Key	Description
Tab	Moves focus to first element and then next items in the group Tab sequence
Space	When focus is on an unchecked checkbox item, checks it.