👌
Chakra UI で input に一括 disabled
この記事を読んで、Chakra UI
だったらどうやるんだろって気になったので調べてみた。
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'
も暗黙的に渡されるみたいでした。
Discussion