SegmentedControls

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}.