Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

SegmentedControl

SegmentedControl is a component used for allowing users to select one option from multiple choices.

Source@yamada-ui/segmented-control

Import

import { SegmentedControl, SegmentedControlButton } from "@yamada-ui/react"
Copied!

Usage

Editable example

<SegmentedControl>
  <SegmentedControlButton value="孫悟空">孫悟空</SegmentedControlButton>
  <SegmentedControlButton value="ベジータ">ベジータ</SegmentedControlButton>
  <SegmentedControlButton value="フリーザ">フリーザ</SegmentedControlButton>
</SegmentedControl>
Copied!

Alternatively, you can omit SegmentedControlButton by setting items.

Editable example

const items: SegmentedControlItem[] = [
  { label: "孫悟空", value: "孫悟空" },
  { label: "ベジータ", value: "ベジータ" },
  { label: "フリーザ", value: "フリーザ" },
]

return <SegmentedControl items={items} />
Copied!

Change Variant

Editable example

<VStack alignItems="flex-start">
  <SegmentedControl variant="basic">
    <SegmentedControlButton value="孫悟空">孫悟空</SegmentedControlButton>
    <SegmentedControlButton value="ベジータ">ベジータ</SegmentedControlButton>
    <SegmentedControlButton value="フリーザ">フリーザ</SegmentedControlButton>
  </SegmentedControl>

  <SegmentedControl variant="rounded">
    <SegmentedControlButton value="孫悟空">孫悟空</SegmentedControlButton>
    <SegmentedControlButton value="ベジータ">ベジータ</SegmentedControlButton>
    <SegmentedControlButton value="フリーザ">フリーザ</SegmentedControlButton>
  </SegmentedControl>
</VStack>
Copied!

Change Size

Editable example

<VStack alignItems="flex-start">
  <SegmentedControl size="sm">
    <SegmentedControlButton value="孫悟空">孫悟空</SegmentedControlButton>
    <SegmentedControlButton value="ベジータ">ベジータ</SegmentedControlButton>
    <SegmentedControlButton value="フリーザ">フリーザ</SegmentedControlButton>
  </SegmentedControl>

  <SegmentedControl size="md">
    <SegmentedControlButton value="孫悟空">孫悟空</SegmentedControlButton>
    <SegmentedControlButton value="ベジータ">ベジータ</SegmentedControlButton>
    <SegmentedControlButton value="フリーザ">フリーザ</SegmentedControlButton>
  </SegmentedControl>

  <SegmentedControl size="lg">
    <SegmentedControlButton value="孫悟空">孫悟空</SegmentedControlButton>
    <SegmentedControlButton value="ベジータ">ベジータ</SegmentedControlButton>
    <SegmentedControlButton value="フリーザ">フリーザ</SegmentedControlButton>
  </SegmentedControl>
</VStack>
Copied!

Change Color Scheme

Apply different color styles by changing the color scheme.

Editable example

<VStack alignItems="flex-start">
  <SegmentedControl colorScheme="secondary">
    <SegmentedControlButton value="孫悟空">孫悟空</SegmentedControlButton>
    <SegmentedControlButton value="ベジータ">ベジータ</SegmentedControlButton>
    <SegmentedControlButton value="フリーザ">フリーザ</SegmentedControlButton>
  </SegmentedControl>

  <SegmentedControl colorScheme="green">
    <SegmentedControlButton value="孫悟空">孫悟空</SegmentedControlButton>
    <SegmentedControlButton value="ベジータ">ベジータ</SegmentedControlButton>
    <SegmentedControlButton value="フリーザ">フリーザ</SegmentedControlButton>
  </SegmentedControl>
</VStack>
Copied!

Set Default Value

To set a default value, assign a string to defaultValue.

Editable example

<SegmentedControl defaultValue="ベジータ">
  <SegmentedControlButton value="孫悟空">孫悟空</SegmentedControlButton>
  <SegmentedControlButton value="ベジータ">ベジータ</SegmentedControlButton>
  <SegmentedControlButton value="フリーザ">フリーザ</SegmentedControlButton>
</SegmentedControl>
Copied!

Disable

To disable, set isDisabled to true.

Editable example

<VStack alignItems="flex-start">
  <SegmentedControl isDisabled>
    <SegmentedControlButton value="孫悟空">孫悟空</SegmentedControlButton>
    <SegmentedControlButton value="ベジータ">ベジータ</SegmentedControlButton>
    <SegmentedControlButton value="フリーザ">フリーザ</SegmentedControlButton>
  </SegmentedControl>

  <SegmentedControl>
    <SegmentedControlButton value="孫悟空">孫悟空</SegmentedControlButton>
    <SegmentedControlButton value="ベジータ" isDisabled>
      ベジータ
    </SegmentedControlButton>
    <SegmentedControlButton value="フリーザ">フリーザ</SegmentedControlButton>
  </SegmentedControl>
</VStack>
Copied!

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

<VStack alignItems="flex-start">
  <SegmentedControl isReadOnly>
    <SegmentedControlButton value="孫悟空">孫悟空</SegmentedControlButton>
    <SegmentedControlButton value="ベジータ">ベジータ</SegmentedControlButton>
    <SegmentedControlButton value="フリーザ">フリーザ</SegmentedControlButton>
  </SegmentedControl>

  <SegmentedControl>
    <SegmentedControlButton value="孫悟空">孫悟空</SegmentedControlButton>
    <SegmentedControlButton value="ベジータ" isReadOnly>
      ベジータ
    </SegmentedControlButton>
    <SegmentedControlButton value="フリーザ">フリーザ</SegmentedControlButton>
  </SegmentedControl>
</VStack>
Copied!

Control

Editable example

const [value, onChange] = useState<string>("孫悟空")

return (
  <SegmentedControl value={value} onChange={onChange}>
    <SegmentedControlButton value="孫悟空">孫悟空</SegmentedControlButton>
    <SegmentedControlButton value="ベジータ">ベジータ</SegmentedControlButton>
    <SegmentedControlButton value="フリーザ">フリーザ</SegmentedControlButton>
  </SegmentedControl>
)
Copied!

Use with React Hook Form

Editable example

type Data = { segmentedControl: string }

const defaultValues: Data = {
  segmentedControl: "ベジータ",
}

const {
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm<Data>({ defaultValues })

const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <Fieldset
      isInvalid={!!errors.segmentedControl}
      legend="Who is your favorite character?"
      errorMessage={
        errors.segmentedControl ? errors.segmentedControl.message : undefined
      }
    >
      <Controller
        name="segmentedControl"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => (
          <SegmentedControl {...field}>
            <SegmentedControlButton value="孫悟空">
              孫悟空
            </SegmentedControlButton>
            <SegmentedControlButton value="ベジータ">
              ベジータ
            </SegmentedControlButton>
            <SegmentedControlButton value="フリーザ">
              フリーザ
            </SegmentedControlButton>
          </SegmentedControl>
        )}
      />
    </Fieldset>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

Edit this page on GitHub

PreviousRatingNextData Display