オプションのオンとオフを切り替える基本的な入力要素。
<Text as="label" size="2">
<Flex gap="2">
<Checkbox defaultChecked />
Agree to Terms and Conditions
</Flex>
</Text>
このコンポーネントは、Checkboxプリミティブからプロパティを継承し、共通のマージン プロパティをサポートしています。
| プロパティ | 型 | デフォルト値 |
|---|---|---|
サイズ | レスポンシブ<"1" | "2" | "3"> | "2" |
バリアント | "classic" | "surface" | "soft" | "surface" |
色 | 列挙型 | デフォルト値なし |
高コントラスト | ブール値 | デフォルト値なし |
sizeプロパティを使用して、チェックボックスのサイズを制御します。
<Flex align="center" gap="2">
<Checkbox size="1" defaultChecked />
<Checkbox size="2" defaultChecked />
<Checkbox size="3" defaultChecked />
</Flex>
variantプロパティを使用して、チェックボックスの視覚スタイルを制御します。
<Flex align="center" gap="4">
<Flex gap="2">
<Checkbox variant="surface" defaultChecked />
<Checkbox variant="surface" />
</Flex>
<Flex gap="2">
<Checkbox variant="classic" defaultChecked />
<Checkbox variant="classic" />
</Flex>
<Flex gap="2">
<Checkbox variant="soft" defaultChecked />
<Checkbox variant="soft" />
</Flex>
</Flex>
colorプロパティを使用して、特定の色を割り当てます。
<Flex gap="2">
<Checkbox color="indigo" defaultChecked />
<Checkbox color="cyan" defaultChecked />
<Checkbox color="orange" defaultChecked />
<Checkbox color="crimson" defaultChecked />
</Flex>
highContrastプロパティを使用して、背景との色のコントラストを高めます。
<Grid columns="5" display="inline-grid" gap="2">
<Checkbox color="indigo" defaultChecked />
<Checkbox color="cyan" defaultChecked />
<Checkbox color="orange" defaultChecked />
<Checkbox color="crimson" defaultChecked />
<Checkbox color="gray" defaultChecked />
<Checkbox color="indigo" defaultChecked highContrast />
<Checkbox color="cyan" defaultChecked highContrast />
<Checkbox color="orange" defaultChecked highContrast />
<Checkbox color="crimson" defaultChecked highContrast />
<Checkbox color="gray" defaultChecked highContrast />
</Grid>
Text内にCheckboxを構成すると、テキストの最初の行と自動的に中央揃えされます。
<Flex direction="column" gap="3">
<Text as="label" size="2">
<Flex as="span" gap="2">
<Checkbox size="1" defaultChecked /> Agree to Terms and Conditions
</Flex>
</Text>
<Text as="label" size="3">
<Flex as="span" gap="2">
<Checkbox size="2" defaultChecked /> Agree to Terms and Conditions
</Flex>
</Text>
<Text as="label" size="4">
<Flex as="span" gap="2">
<Checkbox size="3" defaultChecked /> Agree to Terms and Conditions
</Flex>
</Text>
</Flex>
複数行のテキストに対しても、自動的に適切に配置されます。
<Box maxWidth="300px">
<Text as="label" size="3">
<Flex as="span" gap="2">
<Checkbox defaultChecked /> I understand that these documents are
confidential and cannot be shared with a third party.
</Flex>
</Text>
</Box>
ネイティブのdisabled属性を使用して、無効なチェックボックスを作成します。
<Flex direction="column" gap="2">
<Text as="label" size="2">
<Flex as="span" gap="2">
<Checkbox />
Not checked
</Flex>
</Text>
<Text as="label" size="2">
<Flex as="span" gap="2">
<Checkbox defaultChecked />
Checked
</Flex>
</Text>
<Text as="label" size="2" color="gray">
<Flex as="span" gap="2">
<Checkbox disabled />
Not checked
</Flex>
</Text>
<Text as="label" size="2" color="gray">
<Flex as="span" gap="2">
<Checkbox disabled defaultChecked />
Checked
</Flex>
</Text>
</Flex>
"indeterminate"値を使用して、不定のチェックボックスを作成します。
<Flex gap="2">
<Checkbox defaultChecked="indeterminate" />
<Checkbox checked="indeterminate" />
</Flex>