Components
Checkbox
A versatile checkbox component with multiple variants, states, and sizes
Checkbox
A versatile checkbox component that supports various styles, states, and interactive features. Checkbox is built with accessibility in mind and provides consistent interaction patterns across all variants.
Each checkbox can be customized with different variants, colors, and sizes, making it adaptable to any UI context. All checkboxes include proper focus states and keyboard interactions.
Basic Variants
Checkbox comes in three basic variants that serve different UI purposes:
Primary
The default checkbox style with a solid background when checked. Use for primary selection actions.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown id="primary-default" />
<Unknown
checked
id="primary-checked"
/>
<Unknown
className="!ring-4 !ring-gray-6"
id="primary-focus"
/>
<Unknown
disabled
id="primary-disabled"
/>
<Unknown
checked
disabled
id="primary-disabled-checked"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown id="primary-dark-default" />
<Unknown
checked
id="primary-dark-checked"
/>
<Unknown
className="!ring-4 !ring-gray-6"
id="primary-dark-focus"
/>
<Unknown
disabled
id="primary-dark-disabled"
/>
<Unknown
checked
disabled
id="primary-dark-disabled-checked"
/>
</div>
</div>
</div>Outline
Checkbox with transparent background and visible border when checked. Ideal for secondary selection actions that don't require as much visual emphasis.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
id="outline-default"
variant="outline"
/>
<Unknown
checked
id="outline-checked"
variant="outline"
/>
<Unknown
className="!ring-4 !ring-gray-6 !border-grayA-12"
id="outline-focus"
variant="outline"
/>
<Unknown
disabled
id="outline-disabled"
variant="outline"
/>
<Unknown
checked
disabled
id="outline-disabled-checked"
variant="outline"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
id="outline-dark-default"
variant="outline"
/>
<Unknown
checked
id="outline-dark-checked"
variant="outline"
/>
<Unknown
className="!ring-4 !ring-gray-6 !border-grayA-12"
id="outline-dark-focus"
variant="outline"
/>
<Unknown
disabled
id="outline-dark-disabled"
variant="outline"
/>
<Unknown
checked
disabled
id="outline-dark-disabled-checked"
variant="outline"
/>
</div>
</div>
</div>Ghost
Checkbox with no background when unchecked and subtle hover states. Perfect for tertiary selection actions or when space is limited.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
id="ghost-default"
variant="ghost"
/>
<Unknown
checked
id="ghost-checked"
variant="ghost"
/>
<Unknown
className="!bg-grayA-2"
id="ghost-hover"
variant="ghost"
/>
<Unknown
className="!ring-4 !ring-gray-6 !border-grayA-12"
id="ghost-focus"
variant="ghost"
/>
<Unknown
disabled
id="ghost-disabled"
variant="ghost"
/>
<Unknown
checked
disabled
id="ghost-disabled-checked"
variant="ghost"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
id="ghost-dark-default"
variant="ghost"
/>
<Unknown
checked
id="ghost-dark-checked"
variant="ghost"
/>
<Unknown
className="!bg-grayA-2"
id="ghost-dark-hover"
variant="ghost"
/>
<Unknown
className="!ring-4 !ring-gray-6 !border-grayA-12"
id="ghost-dark-focus"
variant="ghost"
/>
<Unknown
disabled
id="ghost-dark-disabled"
variant="ghost"
/>
<Unknown
checked
disabled
id="ghost-dark-disabled-checked"
variant="ghost"
/>
</div>
</div>
</div>Color Variants
Each checkbox variant can be combined with different color schemes to convey the nature of the selection:
Danger - Primary
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="danger"
id="danger-primary-default"
variant="primary"
/>
<Unknown
checked
color="danger"
id="danger-primary-checked"
variant="primary"
/>
<Unknown
className="!ring-4 !ring-error-6"
color="danger"
id="danger-primary-focus"
variant="primary"
/>
<Unknown
color="danger"
disabled
id="danger-primary-disabled"
variant="primary"
/>
<Unknown
checked
color="danger"
disabled
id="danger-primary-disabled-checked"
variant="primary"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="danger"
id="danger-primary-dark-default"
variant="primary"
/>
<Unknown
checked
color="danger"
id="danger-primary-dark-checked"
variant="primary"
/>
<Unknown
className="!ring-4 !ring-error-6"
color="danger"
id="danger-primary-dark-focus"
variant="primary"
/>
<Unknown
color="danger"
disabled
id="danger-primary-dark-disabled"
variant="primary"
/>
<Unknown
checked
color="danger"
disabled
id="danger-primary-dark-disabled-checked"
variant="primary"
/>
</div>
</div>
</div>Danger - Outline
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="danger"
id="danger-outline-default"
variant="outline"
/>
<Unknown
checked
color="danger"
id="danger-outline-checked"
variant="outline"
/>
<Unknown
className="!ring-4 !ring-error-6 !border-error-9"
color="danger"
id="danger-outline-focus"
variant="outline"
/>
<Unknown
color="danger"
disabled
id="danger-outline-disabled"
variant="outline"
/>
<Unknown
checked
color="danger"
disabled
id="danger-outline-disabled-checked"
variant="outline"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="danger"
id="danger-outline-dark-default"
variant="outline"
/>
<Unknown
checked
color="danger"
id="danger-outline-dark-checked"
variant="outline"
/>
<Unknown
className="!ring-4 !ring-error-6 !border-error-9"
color="danger"
id="danger-outline-dark-focus"
variant="outline"
/>
<Unknown
color="danger"
disabled
id="danger-outline-dark-disabled"
variant="outline"
/>
<Unknown
checked
color="danger"
disabled
id="danger-outline-dark-disabled-checked"
variant="outline"
/>
</div>
</div>
</div>Danger - Ghost
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="danger"
id="danger-ghost-default"
variant="ghost"
/>
<Unknown
checked
color="danger"
id="danger-ghost-checked"
variant="ghost"
/>
<Unknown
className="!bg-error-3"
color="danger"
id="danger-ghost-hover"
variant="ghost"
/>
<Unknown
className="!ring-4 !ring-error-6 !border-error-9"
color="danger"
id="danger-ghost-focus"
variant="ghost"
/>
<Unknown
color="danger"
disabled
id="danger-ghost-disabled"
variant="ghost"
/>
<Unknown
checked
color="danger"
disabled
id="danger-ghost-disabled-checked"
variant="ghost"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="danger"
id="danger-ghost-dark-default"
variant="ghost"
/>
<Unknown
checked
color="danger"
id="danger-ghost-dark-checked"
variant="ghost"
/>
<Unknown
className="!bg-error-3"
color="danger"
id="danger-ghost-dark-hover"
variant="ghost"
/>
<Unknown
className="!ring-4 !ring-error-6 !border-error-9"
color="danger"
id="danger-ghost-dark-focus"
variant="ghost"
/>
<Unknown
color="danger"
disabled
id="danger-ghost-dark-disabled"
variant="ghost"
/>
<Unknown
checked
color="danger"
disabled
id="danger-ghost-dark-disabled-checked"
variant="ghost"
/>
</div>
</div>
</div>Warning - Primary
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="warning"
id="warning-primary-default"
variant="primary"
/>
<Unknown
checked
color="warning"
id="warning-primary-checked"
variant="primary"
/>
<Unknown
className="!ring-4 !ring-warning-6"
color="warning"
id="warning-primary-focus"
variant="primary"
/>
<Unknown
color="warning"
disabled
id="warning-primary-disabled"
variant="primary"
/>
<Unknown
checked
color="warning"
disabled
id="warning-primary-disabled-checked"
variant="primary"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="warning"
id="warning-primary-dark-default"
variant="primary"
/>
<Unknown
checked
color="warning"
id="warning-primary-dark-checked"
variant="primary"
/>
<Unknown
className="!ring-4 !ring-warning-6"
color="warning"
id="warning-primary-dark-focus"
variant="primary"
/>
<Unknown
color="warning"
disabled
id="warning-primary-dark-disabled"
variant="primary"
/>
<Unknown
checked
color="warning"
disabled
id="warning-primary-dark-disabled-checked"
variant="primary"
/>
</div>
</div>
</div>Warning - Outline
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="warning"
id="warning-outline-default"
variant="outline"
/>
<Unknown
checked
color="warning"
id="warning-outline-checked"
variant="outline"
/>
<Unknown
className="!ring-4 !ring-warning-6 !border-warning-9"
color="warning"
id="warning-outline-focus"
variant="outline"
/>
<Unknown
color="warning"
disabled
id="warning-outline-disabled"
variant="outline"
/>
<Unknown
checked
color="warning"
disabled
id="warning-outline-disabled-checked"
variant="outline"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="warning"
id="warning-outline-dark-default"
variant="outline"
/>
<Unknown
checked
color="warning"
id="warning-outline-dark-checked"
variant="outline"
/>
<Unknown
className="!ring-4 !ring-warning-6 !border-warning-9"
color="warning"
id="warning-outline-dark-focus"
variant="outline"
/>
<Unknown
color="warning"
disabled
id="warning-outline-dark-disabled"
variant="outline"
/>
<Unknown
checked
color="warning"
disabled
id="warning-outline-dark-disabled-checked"
variant="outline"
/>
</div>
</div>
</div>Warning - Ghost
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="warning"
id="warning-ghost-default"
variant="ghost"
/>
<Unknown
checked
color="warning"
id="warning-ghost-checked"
variant="ghost"
/>
<Unknown
className="!bg-warning-3"
color="warning"
id="warning-ghost-hover"
variant="ghost"
/>
<Unknown
className="!ring-4 !ring-warning-6 !border-warning-9"
color="warning"
id="warning-ghost-focus"
variant="ghost"
/>
<Unknown
color="warning"
disabled
id="warning-ghost-disabled"
variant="ghost"
/>
<Unknown
checked
color="warning"
disabled
id="warning-ghost-disabled-checked"
variant="ghost"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="warning"
id="warning-ghost-dark-default"
variant="ghost"
/>
<Unknown
checked
color="warning"
id="warning-ghost-dark-checked"
variant="ghost"
/>
<Unknown
className="!bg-warning-3"
color="warning"
id="warning-ghost-dark-hover"
variant="ghost"
/>
<Unknown
className="!ring-4 !ring-warning-6 !border-warning-9"
color="warning"
id="warning-ghost-dark-focus"
variant="ghost"
/>
<Unknown
color="warning"
disabled
id="warning-ghost-dark-disabled"
variant="ghost"
/>
<Unknown
checked
color="warning"
disabled
id="warning-ghost-dark-disabled-checked"
variant="ghost"
/>
</div>
</div>
</div>Success - Primary
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="success"
id="success-primary-default"
variant="primary"
/>
<Unknown
checked
color="success"
id="success-primary-checked"
variant="primary"
/>
<Unknown
className="!ring-4 !ring-success-6"
color="success"
id="success-primary-focus"
variant="primary"
/>
<Unknown
color="success"
disabled
id="success-primary-disabled"
variant="primary"
/>
<Unknown
checked
color="success"
disabled
id="success-primary-disabled-checked"
variant="primary"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="success"
id="success-primary-dark-default"
variant="primary"
/>
<Unknown
checked
color="success"
id="success-primary-dark-checked"
variant="primary"
/>
<Unknown
className="!ring-4 !ring-success-6"
color="success"
id="success-primary-dark-focus"
variant="primary"
/>
<Unknown
color="success"
disabled
id="success-primary-dark-disabled"
variant="primary"
/>
<Unknown
checked
color="success"
disabled
id="success-primary-dark-disabled-checked"
variant="primary"
/>
</div>
</div>
</div>Success - Outline
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="success"
id="success-outline-default"
variant="outline"
/>
<Unknown
checked
color="success"
id="success-outline-checked"
variant="outline"
/>
<Unknown
className="!ring-4 !ring-success-6 !border-success-9"
color="success"
id="success-outline-focus"
variant="outline"
/>
<Unknown
color="success"
disabled
id="success-outline-disabled"
variant="outline"
/>
<Unknown
checked
color="success"
disabled
id="success-outline-disabled-checked"
variant="outline"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="success"
id="success-outline-dark-default"
variant="outline"
/>
<Unknown
checked
color="success"
id="success-outline-dark-checked"
variant="outline"
/>
<Unknown
className="!ring-4 !ring-success-6 !border-success-9"
color="success"
id="success-outline-dark-focus"
variant="outline"
/>
<Unknown
color="success"
disabled
id="success-outline-dark-disabled"
variant="outline"
/>
<Unknown
checked
color="success"
disabled
id="success-outline-dark-disabled-checked"
variant="outline"
/>
</div>
</div>
</div>Success - Ghost
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="success"
id="success-ghost-default"
variant="ghost"
/>
<Unknown
checked
color="success"
id="success-ghost-checked"
variant="ghost"
/>
<Unknown
className="!bg-success-3"
color="success"
id="success-ghost-hover"
variant="ghost"
/>
<Unknown
className="!ring-4 !ring-success-6 !border-success-9"
color="success"
id="success-ghost-focus"
variant="ghost"
/>
<Unknown
color="success"
disabled
id="success-ghost-disabled"
variant="ghost"
/>
<Unknown
checked
color="success"
disabled
id="success-ghost-disabled-checked"
variant="ghost"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="success"
id="success-ghost-dark-default"
variant="ghost"
/>
<Unknown
checked
color="success"
id="success-ghost-dark-checked"
variant="ghost"
/>
<Unknown
className="!bg-success-3"
color="success"
id="success-ghost-dark-hover"
variant="ghost"
/>
<Unknown
className="!ring-4 !ring-success-6 !border-success-9"
color="success"
id="success-ghost-dark-focus"
variant="ghost"
/>
<Unknown
color="success"
disabled
id="success-ghost-dark-disabled"
variant="ghost"
/>
<Unknown
checked
color="success"
disabled
id="success-ghost-dark-disabled-checked"
variant="ghost"
/>
</div>
</div>
</div>Info - Primary
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="info"
id="info-primary-default"
variant="primary"
/>
<Unknown
checked
color="info"
id="info-primary-checked"
variant="primary"
/>
<Unknown
className="!ring-4 !ring-info-6"
color="info"
id="info-primary-focus"
variant="primary"
/>
<Unknown
color="info"
disabled
id="info-primary-disabled"
variant="primary"
/>
<Unknown
checked
color="info"
disabled
id="info-primary-disabled-checked"
variant="primary"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="info"
id="info-primary-dark-default"
variant="primary"
/>
<Unknown
checked
color="info"
id="info-primary-dark-checked"
variant="primary"
/>
<Unknown
className="!ring-4 !ring-info-6"
color="info"
id="info-primary-dark-focus"
variant="primary"
/>
<Unknown
color="info"
disabled
id="info-primary-dark-disabled"
variant="primary"
/>
<Unknown
checked
color="info"
disabled
id="info-primary-dark-disabled-checked"
variant="primary"
/>
</div>
</div>
</div>Info - Outline
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="info"
id="info-outline-default"
variant="outline"
/>
<Unknown
checked
color="info"
id="info-outline-checked"
variant="outline"
/>
<Unknown
className="!ring-4 !ring-info-6 !border-info-9"
color="info"
id="info-outline-focus"
variant="outline"
/>
<Unknown
color="info"
disabled
id="info-outline-disabled"
variant="outline"
/>
<Unknown
checked
color="info"
disabled
id="info-outline-disabled-checked"
variant="outline"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="info"
id="info-outline-dark-default"
variant="outline"
/>
<Unknown
checked
color="info"
id="info-outline-dark-checked"
variant="outline"
/>
<Unknown
className="!ring-4 !ring-info-6 !border-info-9"
color="info"
id="info-outline-dark-focus"
variant="outline"
/>
<Unknown
color="info"
disabled
id="info-outline-dark-disabled"
variant="outline"
/>
<Unknown
checked
color="info"
disabled
id="info-outline-dark-disabled-checked"
variant="outline"
/>
</div>
</div>
</div>Info - Ghost
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="info"
id="info-ghost-default"
variant="ghost"
/>
<Unknown
checked
color="info"
id="info-ghost-checked"
variant="ghost"
/>
<Unknown
className="!bg-info-3"
color="info"
id="info-ghost-hover"
variant="ghost"
/>
<Unknown
className="!ring-4 !ring-info-6 !border-info-9"
color="info"
id="info-ghost-focus"
variant="ghost"
/>
<Unknown
color="info"
disabled
id="info-ghost-disabled"
variant="ghost"
/>
<Unknown
checked
color="info"
disabled
id="info-ghost-disabled-checked"
variant="ghost"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="info"
id="info-ghost-dark-default"
variant="ghost"
/>
<Unknown
checked
color="info"
id="info-ghost-dark-checked"
variant="ghost"
/>
<Unknown
className="!bg-info-3"
color="info"
id="info-ghost-dark-hover"
variant="ghost"
/>
<Unknown
className="!ring-4 !ring-info-6 !border-info-9"
color="info"
id="info-ghost-dark-focus"
variant="ghost"
/>
<Unknown
color="info"
disabled
id="info-ghost-dark-disabled"
variant="ghost"
/>
<Unknown
checked
color="info"
disabled
id="info-ghost-dark-disabled-checked"
variant="ghost"
/>
</div>
</div>
</div>Size Variants
All checkbox variants and color schemes can be combined with different sizes to fit various UI contexts.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
checked
id="size-sm"
size="sm"
/>
<Unknown
checked
id="size-md"
size="md"
/>
<Unknown
checked
id="size-lg"
size="lg"
/>
<Unknown
checked
id="size-xlg"
size="xlg"
/>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
checked
id="size-sm-dark"
size="sm"
/>
<Unknown
checked
id="size-md-dark"
size="md"
/>
<Unknown
checked
id="size-lg-dark"
size="lg"
/>
<Unknown
checked
id="size-xlg-dark"
size="xlg"
/>
</div>
</div>
</div>With Labels
Checkbox components can be combined with labels for better user experience.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-col gap-2">
<div className="flex items-center space-x-2">
<Unknown id="checkbox-terms" />
<label
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
htmlFor="checkbox-terms"
>
<p>
Accept terms and conditions
</p>
</label>
</div>
<div className="flex items-center space-x-2">
<Unknown
disabled
id="checkbox-disabled"
/>
<label
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
htmlFor="checkbox-disabled"
>
<p>
Disabled option
</p>
</label>
</div>
<div className="flex items-center space-x-2">
<Unknown
checked
id="checkbox-checked"
/>
<label
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
htmlFor="checkbox-checked"
>
<p>
Selected option
</p>
</label>
</div>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-col gap-2 dark">
<div className="flex items-center space-x-2">
<Unknown id="checkbox-terms-dark" />
<label
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
htmlFor="checkbox-terms-dark"
>
<p>
Accept terms and conditions
</p>
</label>
</div>
<div className="flex items-center space-x-2">
<Unknown
disabled
id="checkbox-disabled-dark"
/>
<label
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
htmlFor="checkbox-disabled-dark"
>
<p>
Disabled option
</p>
</label>
</div>
<div className="flex items-center space-x-2">
<Unknown
checked
id="checkbox-checked-dark"
/>
<label
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
htmlFor="checkbox-checked-dark"
>
<p>
Selected option
</p>
</label>
</div>
</div>
</div>
</div>Checkbox Group Example
Checkboxes can be grouped together for related selection options.
Notification Preferences
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Notification Preferences
</h4>
<div className="space-y-3">
<div className="flex items-center space-x-2">
<Unknown id="email-notifications" />
<label
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
htmlFor="email-notifications"
>
<p>
Email notifications
</p>
</label>
</div>
<div className="flex items-center space-x-2">
<Unknown id="sms-notifications" />
<label
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
htmlFor="sms-notifications"
>
<p>
SMS notifications
</p>
</label>
</div>
<div className="flex items-center space-x-2">
<Unknown id="push-notifications" />
<label
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
htmlFor="push-notifications"
>
<p>
Push notifications
</p>
</label>
</div>
</div>
</div>
</div>Additional Features
The Checkbox component includes some additional features not shown in all examples above:
Legacy Variant Support
For backward compatibility, the component supports legacy variants:
defaultwill be mapped toprimaryvariantdestructivewill be mapped toprimaryvariant withdangercolor
Customizing Indicator
The Checkbox uses the Check component from @unkey/icons as the default indicator when checked. The icon size adapts automatically to the size of the checkbox.
Props
The Checkbox component accepts all standard HTML input attributes plus the following:
| Prop | Type | Default |
|---|---|---|
variant | "default" | "primary" | "outline" | "ghost" | "primary" |
color | "default" | "success" | "warning" | "danger" | "info" | "default" |
size | "sm" | "md" | "lg" | "xlg" | "md" |
checked | boolean | - |
defaultChecked | boolean | - |
disabled | boolean | - |
required | boolean | - |
name | string | - |
value | string | - |
onCheckedChange | (checked: boolean) => void | - |
Implementation Details
The Checkbox component is built with Radix UI's @radix-ui/react-checkbox primitive for accessibility and proper keyboard navigation. It includes:
- Custom styling for all states: unchecked, checked, disabled, and focus
- Support for different variants through CSS variable variants
- Automatic icon size adjustment based on checkbox size
- Proper ARIA attributes for screen readers
Usage Guidelines
When using the Checkbox component:
-
Semantic meaning: Choose appropriate colors to match the semantic meaning of your checkboxes
- Use default for standard selections without specific connotations
- Use success for positive or confirming selections
- Use warning for cautionary selections that require attention
- Use danger for critical or potentially destructive selections
- Use info for informational or neutral selections
-
Accessibility:
- Always pair checkboxes with visible labels that clearly describe the selection
- Ensure sufficient color contrast between the checkbox and its background
- Group related checkboxes together with a descriptive group label
- Test keyboard navigation (Tab to focus, Space to toggle)
-
Interaction design:
- Use appropriate sizing based on the context and target devices (consider touch targets for mobile)
- Maintain consistent spacing between checkboxes in a group
- Provide clear visual feedback for all states (hover, focus, checked, disabled)
-
Content guidelines:
- Write clear, concise labels that describe the option being selected
- Use sentence case for checkbox labels
- For groups of checkboxes, use a descriptive heading that explains the purpose of the group
-
Form design:
- Consider using the
requiredattribute when a checkbox must be checked to proceed - For lengthy terms and conditions, consider linking to the full text rather than showing it all
- For mutually exclusive options, consider using radio buttons instead
- Consider using the
-
Responsive design:
- Ensure checkboxes and their labels are properly sized and spaced on all devices
- Consider stacking checkboxes vertically on smaller screens for better touch targets