import { SegmentedControls } from '@uhg-abyss/mobile';

shrink

() => {
  const form = useForm({
    defaultValues: {
      'segmented-controls-sandbox': 'one',
    },
  });

  return (
    <FormProvider state={form}>
      <SegmentedControls model="segmented-controls-sandbox">
        <SegmentedControls.Tab label="One" value="one" />
        <SegmentedControls.Tab label="Two" value="two" />
        <SegmentedControls.Tab label="Three" value="three" />
      </SegmentedControls>
    </FormProvider>
  );
};

useForm (recommended)

Using the useForm hook with FormProvider sets state for the component.

useState

Using the useState hook gets values from the component state.

Label

The label prop is used to define the display in each Tab. The label can be an Icon or text.

Structure

Segmented controls consist of a parent element and several children. The parent element <SegmentedControls /> handles the active Tab state. While the children define the segments of the component.

Each child is a Tab: <SegmentedControls.Tab /> A new child is required for every segment.

Shrink

The shrink prop toggles whether the component will take up the full width of the parent container. When true, they will automatically size based on the number of tabs and their content. Defaults to false.

Example

Dynamic Type

SegmentedControls scale to 3XL. Any icons passed to the label prop will need to set maxFontSizeMultiplier={1.3}.

SegmentedControls Props

Name	Type	Default	Required	Description
children	React.ReactNode	-		The SegmentedControls Tabs
model	never | string | undefined	-	-	model is only used when the input is bound to a form via useForm. Model name used to bind the input to the form state. Only used inside a FormProvider.
onChange	(value: any) => void | undefined	-	-	Callback fired when the active tab changes
shrink	boolean | undefined	false	-	Toggles between width filling parent and width matching tabs and content
validations	Validations | undefined	-	-	Set rules for the input to be valid. Valid in both useState and useForm modes. Set rules for the input to be valid.
value	string | number | undefined	-	-	The value of the active tab

SegmentedControls.Tab Props

Name	Type	Default	Required	Description
label	string | number | React.JSX.Element | undefined	-	-	Defines the label of the tab, which can be a node for icons
value	string | number | undefined	-	-	Defines the value of the tab

SegmentedControls Classes

Class Name	Description
abyss-segmented-controls-root	Segmented controls root element
abyss-segmented-controls-selected-tab	Selected tab in the controls

SegmentedControls.Tab Classes

Class Name	Description
abyss-segmented-controls-tab-root	Segmented controls root element

SegmentedControls Tokens

Search tokens

Token Name	Value
segmented-control.color.surface.container	#F3F3F3
segmented-control.color.surface.option	#FFFFFF
segmented-control.color.text.rest	#4B4D4F
segmented-control.color.text.active	#323334
segmented-control.border-radius.all.container	500
segmented-control.border-radius.all.option	500
segmented-control.spacing.padding.all.container	6
segmented-control.spacing.padding.horizontal.option	12
segmented-control.spacing.padding.vertical.option	6
segmented-control.box-shadow.option	Shadow Color: rgba(0,0,0,0.16) Shadow Offset: Width: 0 Height: 4 Shadow Opacity: 1 Shadow Radius: 4