logo
Charcoal

SegmentedControl

複数の要素のうち1つを選択状態を示すコンポーネント

BASIC

value: option1

import { useState } from 'react'
import { SegmentedControl } from '@charcoal-ui/react'

export const ExampleSegmentedControl = () => {
  const [value, setValue] = useState('option1')
  return (
    <div>
      <p>value: {value}</p>
      <SegmentedControl
        data={['option1', 'option2', 'option3']}
        defaultValue="option1"
        value={value}
        onChange={setValue}
      ></SegmentedControl>
    </div>
  )
}

disabled

readonly

Props

namedescriptiontypedefaultrequired
data表示する選択肢の配列string[]YES
defaultValue初期値stringNO
disabled無効化booleanfalseNO
name（廃止）stringNO
onChange値が変更された際に呼ばれる関数(value: string) => voidNO
readonly読み取り専用化booleanfalseNO
requiredaria-requiredの付与booleanNO
value現在の値stringNO