Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

SegmentedControl

SegmentedControlは、ユーザーが複数の選択肢の中から1つを選択するための使用されるコンポーネントです。

ソース@yamada-ui/segmented-control

インポート

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

使い方

編集可能な例

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

または、itemsを設定することでSegmentedControlButtonを省略することができます。

編集可能な例

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

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

バリアントを変更する

編集可能な例

<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!

サイズを変更する

編集可能な例

<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!

カラースキーマを変更する

カラースキーマを変更して、異なる色のスタイルを適用します。

編集可能な例

<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!

デフォルトの値を設定する

デフォルトの値を設定する場合は、defaultValueに文字列を設定します。

編集可能な例

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

無効化する

無効化する場合は、isDisabledをtrueに設定します。

編集可能な例

<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!

読み取り専用にする

読み取り専用にする場合は、isReadOnlyをtrueに設定します。

編集可能な例

<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!

制御する

編集可能な例

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

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

React Hook Formを使う

編集可能な例

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)}>
    <FormControl
      isInvalid={!!errors.segmentedControl}
      label="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>
        )}
      />
    </FormControl>

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

GitHubでこのページを編集する

前Rating次データディスプレイ