React: Chakra UIのButtonを操作できなくするプロパティはdisabledではなくisDisabled

使い始めたChakra UIについて、プロパティの扱いでつまずいたため、情報を共有します。

Buttonコンポーネントを操作できなくするプロパティはisDisabled

Chakra UIのButtonコンポーネントを操作できなくするために用いるプロパティはisDisabledです。HTMLの標準プロパティdisabledは使えません。

TypeScriptを備えた環境でも、disabledはButtonコンポーネントの型として通ってしまうのが悩ましいところです(「disabled prop does not work for Button and Radio despite the type allowing it」参照)。公式ドキュメントに、disabledがダメという情報は、探した範囲では見当たりません。

カスタムボタンならdisabledが使える

辛うじて公式ドキュメント「Button」の「Custom Button」の項には、カスタムボタンならdisabledプロパティは定められるという説明があります。ただし、コンポーネントはBoxを用い、asプロパティでDOM要素buttonに設定したうえで(as="button")¹、スタイルは細かく決めなければなりません(「Custom Button」参照)。

なお、disabledがtrueのときのスタイルは、_disabledプロパティに定めてください。

<Box
	as='button'

	_disabled={{ bg: 'lightgray' }}
	disabled={true}
>

というより、Buttonコンポーネントにdisabledはプロパティとして使えないということを、まずドキュメントに明記してほしかったです。

CheckboxがチェックされているかはisCheckedプロパティ

筆者は、チェックボックスがチェックされていなかったら、ボタンは押せないという動作を書いていました。このときまた、Checkboxコンポーネントに用いるプロパティはcheckedではありません。isCheckedです。

boolean(論理値)型のプロパティには接頭辞isを付するという命名規則は、明確だといえるかもしれません。ただ、標準HTMLと異なる点については、もう少し説明がほしいでしょう。

1. Boxコンポーネントは、デフォルトでは<div>要素として描画されます。asはこれを他のDOM要素、ここでは<button>に切り替えるプロパティです。 ↩