DropdownSelector

ドロップダウン形式の選択コンポーネント

DropdownMenuItemと合わせて使用してください。

BASIC

selected: 50

import { useState } from 'react'
import { DropdownSelector, DropdownMenuItem } from '@charcoal-ui/react'

export const ExampleDropdownSelector = () => {
  const [selected, setSelected] = useState<string>('50')

  return (
    <div style={{ width: '300px' }}>
      <p>selected: {selected}</p>
      <DropdownSelector
        label="dropdown-selector"
        onChange={(value) => setSelected(value)}
        value={selected}
      >
        {[...Array(100)].map((_, i) => {
          return (
            <DropdownMenuItem key={i} value={i.toString()}>
              option{i.toString()}
            </DropdownMenuItem>
          )
        })}
      </DropdownSelector>
    </div>
  )
}

disabled

subLabel

required

required*必須

requiredText*REQUIRED

invalid,assistiveText

assistiveText

section

Props

name	description	type	default	required
label	ラベル	string		YES
name	非表示の<select />に付与されるname属性	string		YES
onChange	選択肢が選択された時に呼び出されるイベント	(value: string) => void		YES
value	選択中の選択肢の値	string		YES
assistiveText	下に表示するヒントテキスト	string		NO
disabled	無効化	boolean	false	NO
invalid	入力の不正化	boolean	false	NO
required	入力の必須化	boolean	false	NO
requiredText	必須であることを示すテキスト	string	"*必須"	NO
showLabel	trueであればlabel,subLabelを表示する requiredがtrueであればrequiredTextも表示する	string		NO
subLabel	補助的な内容を示すラベル	string		NO

Props (DropdownMenuItem)

name	description	type	default	required
disabled	選択の無効化	boolean		NO
value	選択肢の値	string		NO