@mindlogic-ai/logician-ui 5.0.0-alpha.2 → 5.0.0-alpha.21

package/src/components/Card/Card.usage.mdx

@@ -0,0 +1,216 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as CardStories from './Card.stories';
+
+<Meta of={CardStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# Card
+
+A bordered surface that groups content about one thing: a course, a meeting,
+a plan, a setting. Default padding is `8`; most call sites set their own.
+
+## When to use
+
+- To group the content and actions of one item, especially in a list or grid
+  of similar items.
+- To set a summary or result apart from the page (`variant="wash"`).
+- As a single click target for the whole item (`clickable` with `as`).
+
+## When not to use
+
+- Records with the same columns → `Table`.
+- A message about the page or a task → `Banner`.
+- Sections that open and close → `Accordion` or `Collapsible`.
+- Just to add space or a border around a form. Use layout (`Stack`, padding).
+
+## Variants and what they mean
+
+</En>
+
+<Ko>
+
+# Card
+
+한 대상(강좌, 회의, 요금제, 설정)에 관한 내용을 테두리 있는 면으로 묶는 컴포넌트입니다.
+기본 안쪽 여백은 `8`이며, 대부분의 호출부에서 직접 정합니다.
+
+## 언제 쓰나요
+
+- 한 항목의 내용과 동작을 묶을 때. 특히 비슷한 항목이 목록이나 격자로 늘어설 때.
+- 요약이나 결과를 페이지와 구분할 때(`variant="wash"`).
+- 항목 전체를 한 번에 누르는 대상으로 만들 때(`clickable`과 `as`).
+
+## 언제 쓰지 않나요
+
+- 같은 열을 가진 기록은 `Table`을 씁니다.
+- 페이지나 작업에 관한 안내는 `Banner`를 씁니다.
+- 여닫는 섹션은 `Accordion`이나 `Collapsible`을 씁니다.
+- 폼 둘레에 여백이나 테두리를 두려는 목적만으로 쓰지 않습니다. 레이아웃(`Stack`, 여백)을
+  씁니다.
+
+## 변형과 뜻
+
+</Ko>
+
+<ArgTypes of={CardStories} include={['variant', 'clickable']} />
+
+<En>
+
+| Variant | Means | Use for |
+| --- | --- | --- |
+| `default` | A framed item on the page: `bg.surface` and a `border.subtle` hairline | List items, settings groups |
+| `wash` | A block that summarises or concludes: `bg.muted`, no border | An AI summary, a purchase total, an accepted invitation |
+| `elevated` | A standalone object that sits above the page: soft `sm` shadow | A recording or processing panel |
+| `clickable` | The whole card is one target: hover steps to `bg.subtle` and `border.strong`, nothing lifts | Course cards, chatbot cards |
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+| 변형 | 뜻 | 쓰는 곳 |
+| --- | --- | --- |
+| `default` | 페이지 위의 테두리 있는 항목. `bg.surface`와 `border.subtle` 선 | 목록 항목, 설정 묶음 |
+| `wash` | 요약하거나 마무리하는 블록. `bg.muted`, 테두리 없음 | AI 요약, 결제 합계, 수락한 초대 |
+| `elevated` | 페이지 위에 떠 있는 독립된 대상. 부드러운 `sm` 그림자 | 녹음 패널, 처리 중 패널 |
+| `clickable` | 카드 전체가 누르는 대상. 호버하면 `bg.subtle`과 `border.strong`으로 바뀌고 떠오르지 않음 | 강좌 카드, 챗봇 카드 |
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={CardStories.DoClickableIsTheLink} />
+<Verdict
+  kind="do"
+  en="Make a clickable card the link itself (as='a' or as={NextLink}), so it is focusable and announced as a link."
+  ko="누를 수 있는 카드는 카드 자체를 링크로 만듭니다(as='a' 또는 as={NextLink}). 그래야 초점을 받고 링크로 읽힙니다."
+/>
+
+<Canvas of={CardStories.DontButtonInClickable} />
+<Verdict
+  kind="dont"
+  en="Put a second control inside a clickable card. A click on 삭제 also opens the card, and as a link or button the card cannot contain another control. Move the action out, or make only the title the link."
+  ko="누를 수 있는 카드 안에 다른 컨트롤을 넣지 마세요. '삭제'를 눌러도 카드가 열리고, 카드가 링크나 버튼이면 안에 다른 컨트롤을 둘 수 없습니다. 동작을 밖으로 빼거나 제목만 링크로 만듭니다."
+/>
+
+<Canvas of={CardStories.DoWashForSummary} />
+<Verdict
+  kind="do"
+  en="Use wash for a summary or a result. The fill sets it apart, so it needs no border."
+  ko="요약이나 결과에는 wash를 씁니다. 배경색이 구분해 주므로 테두리가 필요 없습니다."
+/>
+
+<Canvas of={CardStories.DontNestedCards} />
+<Verdict
+  kind="dont"
+  en="Nest cards. Borders inside borders add weight without adding structure; use dividers or a Stack inside one card."
+  ko="카드 안에 카드를 넣지 마세요. 테두리 안의 테두리는 구조 없이 무게만 더합니다. 한 카드 안에서 구분선이나 Stack을 씁니다."
+/>
+
+<En>
+
+## Content
+
+- Lead with what identifies the item (its name), then the details.
+- Keep actions for the item at the bottom or top-right, in the same place on
+  every card in a list.
+
+## Accessibility
+
+What Card does for you:
+
+- `as` changes the element and its props, so a clickable card can be a real
+  `<a>` or `<button>` and get focus, Enter (and Space for a button) and the
+  right role without extra code.
+- The hover state uses a border and a tier step, not a shadow, so it also
+  reads in dark mode.
+
+What you still have to do:
+
+- **A clickable card must be a control** (WCAG 2.1.1, 4.1.2). `clickable` is
+  styling only. A `<div>` with `onClick` is not focusable. With
+  `as="button"`, also pass `type="button"`.
+- **Nothing interactive inside a clickable card** (nested interactive
+  controls, `ACCESSIBILITY.md` §3). If a card needs its own actions, make only
+  the title the link.
+- **Inside a `<button>`, only phrasing content.** A card rendered as a button
+  must not contain `<div>` or `<p>` children (`ACCESSIBILITY.md` §5, KWCAG
+  5.4.1.1). Use `as="span"` with `display="block"` on the text inside, or use
+  a link.
+- Card has no visible focus style of its own. Check the focus indicator of a
+  clickable card in your app (WCAG 2.4.7).
+
+## Tokens
+
+Read from `Card.tsx` and `clickableStyles` / `variantStyles` in
+`Card.styles.ts`.
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 항목을 알아볼 수 있는 것(이름)을 먼저 쓰고, 세부 내용을 뒤에 씁니다.
+- 항목의 동작은 목록 안의 모든 카드에서 같은 자리(아래쪽이나 오른쪽 위)에 둡니다.
+
+## 접근성
+
+Card가 알아서 하는 일
+
+- `as`가 요소와 그 속성을 함께 바꾸므로, 누를 수 있는 카드를 실제 `<a>`나
+  `<button>`으로 만들 수 있습니다. 그러면 따로 코드를 쓰지 않아도 초점, Enter(버튼이면
+  Space도), 알맞은 역할이 생깁니다.
+- 호버 상태는 그림자가 아니라 테두리와 바탕 단계로 표현하므로 다크 모드에서도
+  보입니다.
+
+직접 챙겨야 하는 일
+
+- **누를 수 있는 카드는 컨트롤이어야 합니다**(WCAG 2.1.1, 4.1.2). `clickable`은
+  모양만 바꿉니다. `onClick`만 단 `<div>`는 초점을 받지 못합니다. `as="button"`을 쓸
+  때는 `type="button"`도 넘깁니다.
+- **누를 수 있는 카드 안에는 상호작용 요소를 넣지 않습니다**(상호작용 요소 중첩,
+  `ACCESSIBILITY.md` 3절). 카드에 따로 동작이 필요하다면 제목만 링크로 만듭니다.
+- **`<button>` 안에는 phrasing content만 넣습니다.** 버튼으로 그린 카드에는 `<div>`나
+  `<p>` 자식을 넣지 않습니다(`ACCESSIBILITY.md` 5절, KWCAG 5.4.1.1). 안의 글자에는
+  `as="span"`과 `display="block"`을 쓰거나 링크를 씁니다.
+- Card에는 자체 초점 스타일이 없습니다. 앱에서 누를 수 있는 카드의 초점 표시를
+  확인합니다(WCAG 2.4.7).
+
+## 토큰
+
+`Card.tsx`와 `Card.styles.ts`의 `clickableStyles` / `variantStyles`에서 읽습니다.
+
+</Ko>
+
+<Canvas of={CardStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **Table**: records with the same columns.
+- **Banner**: a message about the page.
+- **Accordion** / **Collapsible**: sections that open.
+- **Masonry**: a grid of cards with different heights.
+- **Foundations/Brand & colour usage**: surfaces and layers.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **Table**: 같은 열을 가진 기록.
+- **Banner**: 페이지에 관한 안내.
+- **Accordion** / **Collapsible**: 여닫는 섹션.
+- **Masonry**: 높이가 서로 다른 카드의 격자.
+- **Foundations/Brand & colour usage**: 면과 레이어.
+
+</Ko>

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -2,6 +2,9 @@ import React, { useState } from 'react';
 import { HStack, Stack, VStack } from '@chakra-ui/react';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { T } from '../../guidelines/_components/Lang';
+import { TokenTable } from '../../guidelines/_components/TokenTable';
+import { Text } from '../Typography';
 import { Checkbox } from './Checkbox';
 
 const meta = {
@@ -28,7 +31,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  render: args => (
+  render: (args) => (
     <Checkbox {...args}>
       <Checkbox.Control />
     </Checkbox>
@@ -36,7 +39,7 @@ export const Default: Story = {
 };
 
 export const Checked: Story = {
-  render: args => (
+  render: (args) => (
     <Checkbox {...args}>
       <Checkbox.Control />
     </Checkbox>
@@ -45,7 +48,7 @@ export const Checked: Story = {
 };
 
 export const Indeterminate: Story = {
-  render: args => (
+  render: (args) => (
     <Checkbox {...args}>
       <Checkbox.Control />
     </Checkbox>
@@ -54,7 +57,7 @@ export const Indeterminate: Story = {
 };
 
 export const Disabled: Story = {
-  render: args => (
+  render: (args) => (
     <Checkbox {...args}>
       <Checkbox.Control />
     </Checkbox>
@@ -63,7 +66,7 @@ export const Disabled: Story = {
 };
 
 export const DisabledChecked: Story = {
-  render: args => (
+  render: (args) => (
     <Checkbox {...args}>
       <Checkbox.Control />
     </Checkbox>
@@ -72,7 +75,7 @@ export const DisabledChecked: Story = {
 };
 
 export const DisabledIndeterminate: Story = {
-  render: args => (
+  render: (args) => (
     <Checkbox {...args}>
       <Checkbox.Control />
     </Checkbox>
@@ -81,7 +84,7 @@ export const DisabledIndeterminate: Story = {
 };
 
 export const WithLabel: Story = {
-  render: args => (
+  render: (args) => (
     <Checkbox {...args}>
       <Checkbox.Control />
       <Checkbox.Label>Accept terms and conditions</Checkbox.Label>
@@ -92,7 +95,7 @@ export const WithLabel: Story = {
 export const Sizes: Story = {
   render: () => (
     <HStack gap={6} align="center">
-      {(['xs', 'sm', 'md', 'lg'] as const).map(size => (
+      {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
         <VStack key={size} gap={2}>
           <Checkbox size={size} checked={true}>
             <Checkbox.Control />
@@ -105,7 +108,7 @@ export const Sizes: Story = {
 };
 
 export const LeftLabel: Story = {
-  render: args => (
+  render: (args) => (
     <Checkbox {...args}>
       <Checkbox.Label>Label on the left</Checkbox.Label>
       <Checkbox.Control />
@@ -115,7 +118,7 @@ export const LeftLabel: Story = {
 };
 
 export const RichLabel: Story = {
-  render: args => (
+  render: (args) => (
     <Checkbox {...args}>
       <Checkbox.Control />
       <Checkbox.Label>
@@ -143,8 +146,8 @@ export const Group: Story = {
     };
 
     const handleToggle = (item: string) => {
-      setSelected(prev =>
-        prev.includes(item) ? prev.filter(i => i !== item) : [...prev, item]
+      setSelected((prev) =>
+        prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item]
       );
     };
 
@@ -158,7 +161,7 @@ export const Group: Story = {
           <Checkbox.Label>Select All</Checkbox.Label>
         </Checkbox>
         <Stack gap={2} pl={6}>
-          {items.map(item => (
+          {items.map((item) => (
             <Checkbox
               key={item}
               checked={selected.includes(item)}
@@ -173,3 +176,127 @@ export const Group: Story = {
     );
   },
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `Checkbox.usage.mdx` with <Canvas of={…} />. Hidden (`!dev`); `tags`
+// is written out on each story because the indexer reads CSF statically.
+
+const CHANNELS = ['이메일', '앱 알림', '문자'];
+
+export const DoLabelledList: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: several independent choices',
+  render: () => (
+    <Stack gap={2}>
+      <Text fontWeight="semibold">알림 받을 곳</Text>
+      {CHANNELS.map((channel, i) => (
+        <Checkbox key={channel} defaultChecked={i === 0}>
+          <Checkbox.Control />
+          <Checkbox.Label>{channel}</Checkbox.Label>
+        </Checkbox>
+      ))}
+    </Stack>
+  ),
+};
+
+export const DoSelectAll: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: indeterminate for a partial select-all',
+  render: () => {
+    const [checked, setChecked] = useState([true, false, true]);
+    const all = checked.every(Boolean);
+    const some = checked.some(Boolean);
+    return (
+      <Stack gap={2}>
+        <Checkbox
+          checked={all ? true : some ? 'indeterminate' : false}
+          onCheckedChange={() => setChecked(checked.map(() => !all))}
+        >
+          <Checkbox.Control />
+          <Checkbox.Label>전체 선택</Checkbox.Label>
+        </Checkbox>
+        <Stack gap={2} pl={6}>
+          {CHANNELS.map((channel, i) => (
+            <Checkbox
+              key={channel}
+              checked={checked[i]}
+              onCheckedChange={(e) =>
+                setChecked(checked.map((v, j) => (j === i ? !!e.checked : v)))
+              }
+            >
+              <Checkbox.Control />
+              <Checkbox.Label>{channel}</Checkbox.Label>
+            </Checkbox>
+          ))}
+        </Stack>
+      </Stack>
+    );
+  },
+};
+
+export const DontNegativeLabel: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: a negative label",
+  render: () => (
+    <Checkbox>
+      <Checkbox.Control />
+      <Checkbox.Label>마케팅 메일 받지 않기</Checkbox.Label>
+    </Checkbox>
+  ),
+};
+
+export const DoHiddenLabelInTable: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: a hidden label when the row names it',
+  render: () => (
+    <HStack gap={3}>
+      <Checkbox>
+        <Checkbox.Control />
+        <Checkbox.Label srOnly>김민지 선택</Checkbox.Label>
+      </Checkbox>
+      <Text>김민지</Text>
+      <Text color="fg.muted">minji@company.com</Text>
+    </HStack>
+  ),
+};
+
+/** Tokens `CheckboxControl` reads, as written in `CheckboxControl.tsx`. */
+export const UsageTokens: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Tokens',
+  render: () => (
+    <TokenTable
+      rows={[
+        {
+          token: 'bg.surface',
+          use: <T en="Unchecked box" ko="선택 전 상자" />,
+        },
+        {
+          token: 'border.control',
+          use: <T en="Unchecked border (3:1)" ko="선택 전 테두리(3:1)" />,
+        },
+        {
+          token: 'primary.main',
+          use: (
+            <T en="Checked and indeterminate fill" ko="선택·일부 선택 채움" />
+          ),
+        },
+        { token: 'fg.onPrimary', use: <T en="Check mark" ko="체크 표시" /> },
+        { token: 'disabled.bg', use: <T en="Disabled box" ko="비활성 상자" /> },
+        {
+          token: 'disabled.fg',
+          use: <T en="Disabled mark" ko="비활성 표시" />,
+        },
+        {
+          token: 'focus.ring',
+          use: <T en="Keyboard focus ring" ko="키보드 초점 링" />,
+        },
+      ]}
+    />
+  ),
+};

package/src/components/Checkbox/Checkbox.usage.mdx

@@ -0,0 +1,214 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as CheckboxStories from './Checkbox.stories';
+
+<Meta of={CheckboxStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# Checkbox
+
+A box the user ticks to include an item or agree to something. Each checkbox
+is independent of the others.
+
+## When to use
+
+- Picking any number of items from a short list: notification channels,
+  table rows, members to invite.
+- A single yes/no that takes effect when the form is submitted: agreeing to
+  terms, "include subgroups".
+- A "select all" row over a list, with `indeterminate` when only some are
+  ticked.
+
+## When not to use
+
+- Exactly one option out of several → `Radio`, or `SelectField` for a long
+  list.
+- A setting that reads as on or off, such as a feature toggle in a settings
+  row → `Switch`.
+- An action that runs as soon as it is clicked → `Button`.
+
+## Props
+
+</En>
+
+<Ko>
+
+# Checkbox
+
+항목을 포함하거나 무언가에 동의할 때 표시하는 상자입니다. 체크박스는 서로 영향을
+주지 않습니다.
+
+## 언제 쓰나요
+
+- 짧은 목록에서 원하는 만큼 고를 때: 알림 받을 곳, 표의 행, 초대할 멤버.
+- 폼을 제출할 때 반영되는 예/아니요 하나: 약관 동의, "하위 그룹 포함".
+- 목록 위의 "전체 선택" 행. 일부만 선택됐다면 `indeterminate`를 씁니다.
+
+## 언제 쓰지 않나요
+
+- 여러 선택지 중 하나만 고른다면 `Radio`를, 목록이 길면 `SelectField`를 씁니다.
+- 설정 목록의 기능 켜기처럼 켜짐과 꺼짐으로 읽히는 설정은 `Switch`를 씁니다.
+- 누르자마자 실행되는 동작은 `Button`을 씁니다.
+
+## 속성
+
+</Ko>
+
+<ArgTypes
+  of={CheckboxStories}
+  include={[
+    'checked',
+    'defaultChecked',
+    'onCheckedChange',
+    'disabled',
+    'invalid',
+    'size',
+    'inputRef',
+  ]}
+/>
+
+<En>
+
+Compose it from parts: `<Checkbox>` (the root, rendered as a `<label>`),
+`<Checkbox.Control />` (the box) and `<Checkbox.Label>`. Clicking the label
+toggles the box. `checked` takes `true`, `false` or `'indeterminate'`; `size`
+defaults to `sm`. The tick is drawn on after the box fills, and both happen at
+once when the user prefers reduced motion.
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+부품을 조합해서 씁니다. `<Checkbox>`(루트, `<label>`로 그려짐), `<Checkbox.Control />`
+(상자), `<Checkbox.Label>`입니다. 라벨을 눌러도 상자가 바뀝니다. `checked`에는
+`true`, `false`, `'indeterminate'`를 넘기고, `size` 기본값은 `sm`입니다. 상자가 채워진
+뒤 체크 표시가 그려지며, 사용자가 동작 줄이기를 설정했다면 한 번에 나타납니다.
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={CheckboxStories.DoLabelledList} />
+<Verdict
+  kind="do"
+  en="Stack independent choices under a short heading, one per line, label to the right of the box."
+  ko="서로 상관없는 선택지는 짧은 제목 아래 한 줄에 하나씩, 상자 오른쪽에 라벨을 두고 쌓습니다."
+/>
+
+<Canvas of={CheckboxStories.DoSelectAll} />
+<Verdict
+  kind="do"
+  en="Use indeterminate on the parent when only some children are ticked. Clicking it ticks or clears them all."
+  ko="하위 항목이 일부만 선택됐다면 상위 상자를 indeterminate로 둡니다. 상위 상자를 누르면 전부 선택하거나 전부 해제합니다."
+/>
+
+<Canvas of={CheckboxStories.DontNegativeLabel} />
+<Verdict
+  kind="dont"
+  en="Write the label as a negative. Ticking 'Don't send' makes the reader undo a double negative to know what they chose."
+  ko="라벨을 부정문으로 쓰지 마세요. '받지 않기'에 표시하면 이중 부정을 풀어야 무엇을 골랐는지 압니다."
+/>
+
+<Canvas of={CheckboxStories.DoHiddenLabelInTable} />
+<Verdict
+  kind="do"
+  en="When the row already shows what the box selects, keep a Checkbox.Label with srOnly so the box still has a name."
+  ko="무엇을 고르는지 행에 이미 보인다면 Checkbox.Label에 srOnly를 주어, 보이지 않아도 상자에 이름이 남게 합니다."
+/>
+
+<En>
+
+## Content
+
+- Phrase the label so that ticking it means yes: 마케팅 메일 받기, not 마케팅
+  메일 받지 않기.
+- Keep labels short and parallel. If one needs explaining, put the
+  explanation in a second, muted line inside the label.
+- A heading over a group says what the choices are about (알림 받을 곳).
+
+## Accessibility
+
+What Checkbox does for you:
+
+- A native checkbox input sits inside the root, so Tab focuses it and Space
+  toggles it. The whole label is the click target.
+- The keyboard focus ring (`focus.ring` on a `bg.canvas` gap) shows on the box
+  (WCAG 2.4.7). The unchecked border uses `border.control`, built for 3:1
+  against the page (WCAG 1.4.11).
+- Checked and indeterminate are drawn with a mark as well as a fill, so the
+  state does not rely on colour alone (WCAG 1.4.1).
+
+What you still have to do:
+
+- **Always render `Checkbox.Label`**, with `srOnly` when it should not show.
+  Without it the box has no name (WCAG 4.1.2; KWCAG 5.3.4.1 레이블 제공).
+- Give a group of checkboxes a visible heading so it is clear what the choices
+  are about (WCAG 1.3.1).
+- If a choice is required (agreeing to terms), say so in the label or helper
+  text and show an error in words when it is missing (WCAG 3.3.1).
+
+## Tokens
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 표시하면 "예"가 되도록 씁니다. "마케팅 메일 받지 않기"가 아니라 "마케팅 메일
+  받기"입니다.
+- 라벨은 짧고 같은 형식으로 씁니다. 설명이 필요하면 라벨 안에 흐린 글자로 한 줄을 더
+  둡니다.
+- 묶음 위의 제목은 무엇에 관한 선택인지 알려 줍니다(알림 받을 곳).
+
+## 접근성
+
+Checkbox가 알아서 하는 일
+
+- 루트 안에 네이티브 체크박스가 있어서 Tab으로 초점을 옮기고 Space로 바꿀 수
+  있습니다. 라벨 전체를 눌러도 됩니다.
+- 키보드 초점 링(`bg.canvas` 간격 위의 `focus.ring`)이 상자에 보입니다(WCAG 2.4.7).
+  선택 전 테두리는 배경과 3:1이 되도록 만든 `border.control`을 씁니다(WCAG 1.4.11).
+- 선택과 일부 선택 상태는 채움과 함께 표시로도 그려지므로 색에만 기대지 않습니다
+  (WCAG 1.4.1).
+
+직접 챙겨야 하는 일
+
+- **`Checkbox.Label`을 항상 그립니다.** 보이지 않아야 한다면 `srOnly`를 줍니다.
+  라벨이 없으면 상자에 이름이 없습니다(WCAG 4.1.2, KWCAG 5.3.4.1 레이블 제공).
+- 체크박스 묶음에는 보이는 제목을 두어 무엇에 관한 선택인지 알 수 있게 합니다(WCAG
+  1.3.1).
+- 약관 동의처럼 꼭 선택해야 한다면 라벨이나 도움말에 그렇게 적고, 빠졌을 때는 문구로
+  오류를 알립니다(WCAG 3.3.1).
+
+## 토큰
+
+</Ko>
+
+<Canvas of={CheckboxStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **Radio**: one option out of several.
+- **Switch**: a setting that is on or off.
+- **Table**: row selection.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **Radio**: 여러 선택지 중 하나.
+- **Switch**: 켜짐과 꺼짐으로 읽히는 설정.
+- **Table**: 행 선택.
+
+</Ko>