👌

Chakra UI で input に一括 disabled

2022/06/13に公開

この記事を読んで、Chakra UI だったらどうやるんだろって気になったので調べてみた。
https://zenn.dev/qaynam/articles/73f7d808d71537

FormControl コンポーネントに対して、as='fieldset' と渡してあげて、disabled を追加してあげればできた。

import {
  FormControl,
  FormLabel,
  FormErrorMessage,
  FormHelperText,
} from '@chakra-ui/react'

<FormControl as='fieldset' disabled>
  <FormLabel htmlFor='email'>Email address</FormLabel>
  <Input id='email' type='email' />
  <FormHelperText>We'll never share your email.</FormHelperText>
</FormControl>

ただ、Input コンポーネントに対して、disabled を追加するのとは若干挙動が異なる様子。

<FormControl as='fieldset'>
  <FormLabel htmlFor='email'>Email address</FormLabel>
  <Input id='email' type='email' disabled/>
  <FormHelperText>We'll never share your email.</FormHelperText>
</FormControl>

👆 この場合、Input コンポーネントに、cursor='not-allowed' も暗黙的に渡されるみたいでした。

デモ

GitHubで編集を提案

Discussion