使い始めた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"
)1、スタイルは細かく決めなければなりません(「Custom Button」参照)。
なお、disabled
がtrue
のときのスタイルは、_disabled
プロパティに定めてください。
<Box
as='button'
_disabled={{ bg: 'lightgray' }}
disabled={true}
>
というより、Button
コンポーネントにdisabled
はプロパティとして使えないということを、まずドキュメントに明記してほしかったです。
Checkbox
がチェックされているかはisChecked
プロパティ
筆者は、チェックボックスがチェックされていなかったら、ボタンは押せないという動作を書いていました。このときまた、Checkbox
コンポーネントに用いるプロパティはchecked
ではありません。isChecked
です。
boolean
(論理値)型のプロパティには接頭辞is
を付するという命名規則は、明確だといえるかもしれません。ただ、標準HTMLと異なる点については、もう少し説明がほしいでしょう。
-
Box
コンポーネントは、デフォルトでは<div>
要素として描画されます。as
はこれを他のDOM要素、ここでは<button>
に切り替えるプロパティです。 ↩