MultiSelect

複数の選択肢を選ぶことができる選択コンポーネント

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

BASIC

selected: []

value1

value2

value3

import { useState } from 'react'
import { MultiSelect, MultiSelectGroup } from '@charcoal-ui/react'
import styled from 'styled-components'

export const ExampleMultiSelect = () => {
  const [selectedValues, setSelectedValues] = useState<string[]>([])
  return (
    <div>
      <p>selected: [{selectedValues.join(', ')}]</p>
      <StyledMultiSelectGroup
        label="multi-select-1"
        name="multi-select-1"
        onChange={setSelectedValues}
        selected={selectedValues}
      >
        <MultiSelect value="value1">value1</MultiSelect>
        <MultiSelect value="value2">value2</MultiSelect>
        <MultiSelect value="value3">value3</MultiSelect>
      </StyledMultiSelectGroup>
    </div>
  )
}

export const StyledMultiSelectGroup = styled(MultiSelectGroup)`
  display: flex;
  flex-direction: column;
  gap: 8px;
`

disabled

value1

value2

value3

invalid

value1

value2

value3

readonly

value1

value2

value3

variant

default

overlay

Props (MultiSelectGroup)

name	description	type	default	required
label	aria-label	string		YES
name	inputタグに渡されるname	string		YES
selected	選択されているキーの配列	string[]		YES
disabled	無効化	boolean	false	NO
invalid	入力の不正化	boolean	false	NO
readonly	読み取り専用化	string		NO

Props (MultiSelect)

name	description	type	default	required
value	選択肢の値	string		YES
disabled	無効化	string		NO
variant	スタイル	"Default" \| "Overlay"	"Default"	NO