Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

Checkbox

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

ソース@yamada-ui/checkbox

Checkboxは、アクセシビリティに関してWAI-ARIA - Checkbox Patternに従います。

CheckboxGroupを使用せずグループ化する場合は、Fieldsetを使用します。

const [values, setValues] = useState([false, false])


const allChecked = values.every(Boolean)
const isIndeterminate = values.some(Boolean) && !allChecked


return (
  <Fieldset legend="キャラクター">
    <VStack gap="sm">
      <Checkbox
        isChecked={allChecked}
        isIndeterminate={isIndeterminate}
        onChange={(e) => setValues([e.target.checked, e.target.checked])}
      >
        地球人
      </Checkbox>


      <VStack pl="md" gap="sm">
        <Checkbox
          isChecked={values[0]}
          onChange={(e) => setValues([e.target.checked, values[1]])}
        >
          孫悟空
        </Checkbox>


        <Checkbox
          isChecked={values[1]}
          onChange={(e) => setValues([values[0], e.target.checked])}
        >
          孫悟飯
        </Checkbox>
      </VStack>
    </VStack>
  </Fieldset>
)
Copied!

FormControlを使用しない場合は、CheckboxGroupにaria-labelledbyを設定します。

<VStack gap="sm">
  <Heading as="h3" id="group">
    キャラクター
  </Heading>


  <CheckboxGroup aria-labelledby="group">
    <Checkbox value="孫悟空">孫悟空</Checkbox>
    <Checkbox value="ベジータ">ベジータ</Checkbox>
    <Checkbox value="フリーザ">フリーザ</Checkbox>
  </CheckboxGroup>
</VStack>
Copied!

キーボード操作

キー説明状態
Tab無効ではないチェックボックスをフォーカスします。-
Spaceチェックボックスのチェックの状態を切り替えます。-
チェックボックスを3つ(チェック済み、チェックなし、中間)の状態に切り替えます。isIndeterminate={true}

ARIAロールと属性

コンポーネントロールと属性使い方
CheckboxGrouprole="group"チェックボックスのグループであることを示します。
aria-labelledbyCheckboxGroupがFormControl内にあり、FormControlにlabelまたはLabelが設定されている場合は、そのidを設定します。
CheckboxidisIndeterminate={true}が設定されたチェックボックスに関連付けるために使用するid。
aria-checkedチェックボックスがチェックされている場合は"true"を設定し、チェックされていない場合は"false"を設定します。中間状態の場合は"mixed"を設定します。
aria-controlsisIndeterminate={true}が設定されている場合に、制御するチェックボックスのidを設定します。

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

前Radio次Switch