Switch
Switchは、オンとオフの状態を切り替えるために使用されるコンポーネントです。
インポート
import { Switch } from "@yamada-ui/react"
使い方
編集可能な例
<Switch>basic</Switch>
バリアントを変更する
編集可能な例
<Wrap gap="md"> <Switch variant="thick">thick</Switch> <Switch variant="thin">thin</Switch> </Wrap>
サイズを変更する
編集可能な例
<Wrap gap="md"> <Switch size="sm">small size</Switch> <Switch size="md">medium size</Switch> <Switch size="lg">large size</Switch> </Wrap>
カラースキームを変更する
編集可能な例
<Wrap gap="md"> <Switch colorScheme="secondary" defaultIsChecked> Secondary </Switch> <Switch colorScheme="green" defaultIsChecked> Green </Switch> </Wrap>
ラベルの位置を変更する
ラベルの位置を変更する場合は、isReverseをtrueに設定します。
編集可能な例
<Switch isReverse>basic</Switch>
無効化する
無効化する場合は、isDisabledをtrueに設定します。
編集可能な例
<Wrap gap="md"> <Switch isDisabled>disabled</Switch> <Switch isDisabled defaultIsChecked> disabled </Switch> </Wrap>
読み取り専用にする
読み取り専用にする場合は、isReadOnlyをtrueに設定します。
編集可能な例
<Wrap gap="md"> <Switch isReadOnly>read only</Switch> <Switch isReadOnly defaultIsChecked> read only </Switch> </Wrap>
ラベルをカスタマイズする
ラベルをカスタマイズする場合は、Labelを使用します。
編集可能な例
const id = useId() return ( <HStack gap="sm"> <Label htmlFor={id} userSelect="none"> Please Click </Label> <Switch id={id} /> </HStack> )
制御する
編集可能な例
const [isChecked, { toggle }] = useBoolean(false) return ( <Switch isChecked={isChecked} onChange={toggle}> custom control </Switch> )
React Hook Formを使う
編集可能な例
type Data = { switch: boolean } const { control, handleSubmit, watch } = useForm<Data>() const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data) console.log("watch:", watch()) return ( <VStack as="form" onSubmit={handleSubmit(onSubmit)}> <Controller name="switch" control={control} render={({ field: { value, ...rest } }) => ( <Switch isChecked={value} {...rest}> Dark mode </Switch> )} /> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
GitHubでこのページを編集する