@mindlogic-ai/logician-ui 5.0.0-alpha.3 → 5.0.0-alpha.30

package/src/components/InlineCode/InlineCode.usage.mdx

@@ -0,0 +1,142 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as InlineCodeStories from './InlineCode.stories';
+
+<Meta of={InlineCodeStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# InlineCode
+
+Code inside a sentence: a field name, a value, a shortcut. A small chip one
+size below the text around it (`textStyle="subtext"`, em-relative), with a
+`bg.subtle` fill and a hairline ring.
+
+## When to use
+
+- Identifiers the user types or will see in code or settings:
+  `finish_reason`, `model_id`, a file name.
+
+## When not to use
+
+- More than one line → `Code`.
+- A value the user only needs to copy → `CopyableCode`.
+- Emphasis or warnings → plain text, bold if it must stand out.
+- Keyboard keys in instructions → write them out (Ctrl + C); the chip says
+  "code", not "key".
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+# InlineCode
+
+문장 안의 코드입니다. 필드 이름, 값, 단축키 같은 것을 씁니다. 주변 글자보다 한 단계
+작은 칩으로 그려지고(`textStyle="subtext"`, em 단위), `bg.subtle` 배경과 얇은 테두리가
+있습니다.
+
+## 언제 쓰나요
+
+- 사용자가 직접 입력하거나 코드·설정에서 보게 될 식별자: `finish_reason`,
+  `model_id`, 파일 이름.
+
+## 언제 쓰지 않나요
+
+- 두 줄 이상이라면 `Code`를 씁니다.
+- 복사만 하면 되는 값은 `CopyableCode`를 씁니다.
+- 강조나 경고에는 일반 글자를 쓰고, 꼭 눈에 띄어야 하면 굵게 씁니다.
+- 안내문의 키보드 키는 글자로 씁니다(Ctrl + C). 이 칩은 '코드'라는 뜻이지 '키'라는
+  뜻이 아닙니다.
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={InlineCodeStories.DoIdentifierInSentence} />
+<Verdict
+  kind="do"
+  en="Mark names and values the user will meet in code."
+  ko="사용자가 코드에서 만나게 될 이름과 값을 표시합니다."
+/>
+
+<Canvas of={InlineCodeStories.DontEmphasis} />
+<Verdict
+  kind="dont"
+  en="Use code styling to make words stand out. It tells the reader the words are code."
+  ko="말을 돋보이게 하려고 코드 모양을 쓰지 마세요. 읽는 사람은 그 말을 코드로 받아들입니다."
+/>
+
+<En>
+
+## Content
+
+- Write the identifier exactly as it appears, including case.
+- Keep Korean particles outside the chip: `length`인지, not `length인지`.
+
+## Accessibility
+
+What InlineCode does for you:
+
+- It renders `<code>`, so assistive technology that reports code can, and
+  the chip ring keeps it visible on `bg.sunken`, where the fill alone would
+  vanish.
+
+What you still have to do:
+
+- Nothing in the chip is read differently by most screen readers. Do not
+  rely on the code styling to carry meaning (WCAG 1.3.1); the sentence must
+  make sense on its own.
+
+## Tokens
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 식별자는 대소문자까지 보이는 그대로 씁니다.
+- 한국어 조사는 칩 밖에 둡니다. `length인지`가 아니라 `length`인지로 씁니다.
+
+## 접근성
+
+InlineCode가 알아서 하는 일
+
+- `<code>`로 그리므로 코드를 구분해 알려 주는 보조 기술은 그렇게 읽습니다. 배경만으로는
+  `bg.sunken` 위에서 칩이 사라지기 때문에 테두리를 둡니다.
+
+직접 챙겨야 하는 일
+
+- 대부분의 화면 낭독기는 칩 안의 글자를 다르게 읽지 않습니다. 코드 모양에 뜻을 맡기지
+  말고(WCAG 1.3.1), 문장만으로 뜻이 통하게 씁니다.
+
+## 토큰
+
+</Ko>
+
+<Canvas of={InlineCodeStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **Code**: multi-line code.
+- **CopyableCode**: a value with a copy button.
+- **Typography**: the text InlineCode sits in.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **Code**: 여러 줄 코드.
+- **CopyableCode**: 복사 버튼이 있는 값.
+- **Typography**: InlineCode가 들어가는 본문.
+
+</Ko>

package/src/components/Input/Input.stories.tsx

@@ -3,6 +3,9 @@ import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
 import { PhoneFilledIcon, SearchIcon, MailIcon } from '@/components/Icon';
+import { T } from '../../guidelines/_components/Lang';
+import { TokenTable } from '../../guidelines/_components/TokenTable';
+import { FieldRow } from '../Form';
 import { MaxLengthIndicator } from '../MaxLengthIndicator';
 
 import { Input } from './Input';
@@ -257,3 +260,180 @@ export const FocusState: Story = {
     );
   },
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `Input.usage.mdx` with <Canvas of={…} />. Hidden from the
+// sidebar (`!dev`); `tags` is written out on each story because the indexer
+// reads CSF statically.
+
+export const DoLabelAbove: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: a label above the field',
+  render: () => (
+    <Box maxW="360px">
+      <FieldRow
+        label="업무용 이메일"
+        helperText="초대 메일이 이 주소로 갑니다."
+        required
+      >
+        <Input
+          type="email"
+          autoComplete="email"
+          placeholder="name@company.com"
+        />
+      </FieldRow>
+    </Box>
+  ),
+};
+
+export const DontPlaceholderAsLabel: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: the placeholder as the label",
+  render: () => (
+    <Box maxW="360px">
+      <Input type="email" placeholder="업무용 이메일" />
+    </Box>
+  ),
+};
+
+export const DoErrorInWords: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: say what is wrong, under the field',
+  render: () => (
+    <Box maxW="360px">
+      <FieldRow label="업무용 이메일" error="이메일 주소 형식이 아닙니다.">
+        <Input type="email" value="name@company" onChange={() => {}} />
+      </FieldRow>
+    </Box>
+  ),
+};
+
+export const DontBorderOnly: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: a red border and nothing else",
+  render: () => (
+    <Box maxW="360px">
+      <Input type="email" value="name@company" onChange={() => {}} invalid />
+    </Box>
+  ),
+};
+
+export const DoMaskedAmount: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: maskNumber for amounts',
+  render: () => {
+    const [value, setValue] = useState('2000000');
+    return (
+      <Box maxW="360px">
+        <FieldRow
+          label="월 크레딧 한도"
+          helperText={`저장되는 값: ${value || '(비어 있음)'}`}
+        >
+          <Input
+            type="number"
+            maskNumber
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+          />
+        </FieldRow>
+      </Box>
+    );
+  },
+};
+
+export const DoCountWithLimit: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: show the limit next to maxLength',
+  render: () => {
+    const [value, setValue] = useState('마케팅팀');
+    return (
+      <Box maxW="360px">
+        <FieldRow
+          label="그룹 이름"
+          endAdornment={
+            <MaxLengthIndicator value={value.length} maxLength={20} />
+          }
+        >
+          <Input
+            maxLength={20}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+          />
+        </FieldRow>
+      </Box>
+    );
+  },
+};
+
+/**
+ * Tokens Input reads. Input has no styles file — the values are written in
+ * `Input.tsx` (and mirrored by `Select.styles.ts`); this list follows that file.
+ */
+export const UsageTokens: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Tokens',
+  render: () => (
+    <TokenTable
+      rows={[
+        {
+          token: 'bg.surface',
+          use: <T en="Field background" ko="입력란 배경" />,
+        },
+        { token: 'fg.default', use: <T en="Typed text" ko="입력한 글자" /> },
+        {
+          token: 'border.control',
+          use: (
+            <T
+              en="Border at rest (3:1 against the page)"
+              ko="평소 테두리(배경과 3:1)"
+            />
+          ),
+        },
+        {
+          token: 'fg.icon',
+          use: <T en="Border on hover" ko="마우스를 올렸을 때 테두리" />,
+        },
+        {
+          token: 'primary.main',
+          use: (
+            <T
+              en="Border and 1px ring on focus"
+              ko="초점을 받았을 때 테두리와 1px 링"
+            />
+          ),
+        },
+        {
+          token: 'danger.solid',
+          use: <T en="Border when invalid" ko="오류 상태 테두리" />,
+        },
+        {
+          token: 'bg.subtle',
+          use: <T en="Read-only background" ko="읽기 전용 배경" />,
+        },
+        {
+          token: 'fg.muted',
+          use: <T en="Read-only text" ko="읽기 전용 글자" />,
+        },
+        {
+          token: 'border.subtle',
+          use: <T en="Read-only border" ko="읽기 전용 테두리" />,
+        },
+        {
+          token: 'disabled.bg',
+          use: <T en="Disabled background" ko="비활성 배경" />,
+        },
+        {
+          token: 'disabled.fg',
+          use: <T en="Disabled text" ko="비활성 글자" />,
+        },
+      ]}
+    />
+  ),
+};

package/src/components/Input/Input.tsx

@@ -352,6 +352,10 @@ export const Input = forwardRef(
             bg: 'bg.subtle',
             color: 'fg.muted',
             borderColor: 'border.subtle',
+            // Nothing can be typed here, so hovering must not promise an edit.
+            _hover: {
+              borderColor: 'border.subtle',
+            },
           }}
           _disabled={{
             ...disabledControl,

package/src/components/Input/Input.usage.mdx

@@ -0,0 +1,278 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as InputStories from './Input.stories';
+
+<Meta of={InputStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# Input
+
+A single-line text field: names, email addresses, amounts, search terms.
+
+## When to use
+
+- One line of free text the user types: a name, an email address, a URL.
+- A number the user types exactly, such as a credit limit. Use
+  `type="number"` with `maskNumber` to show thousands separators.
+- A search or filter box, with a `leftIcon`.
+
+## When not to use
+
+- More than one line, or text that wraps → `Textarea`.
+- A password or secret → `PasswordInput`.
+- A short one-time code typed box by box → `PinInput`.
+- A choice from a known list → `SelectField`, `ComboboxField`, `Radio`.
+- A date or month → `SingleDatePicker`, `RangeDatePicker`, `MonthPicker`.
+- A rough value on a scale, where the exact number does not matter → `Slider`.
+
+## Props that change behaviour
+
+</En>
+
+<Ko>
+
+# Input
+
+한 줄짜리 텍스트 입력란입니다. 이름, 이메일 주소, 금액, 검색어에 씁니다.
+
+## 언제 쓰나요
+
+- 사용자가 직접 입력하는 한 줄짜리 텍스트: 이름, 이메일 주소, URL.
+- 정확하게 입력해야 하는 숫자(예: 크레딧 한도). 천 단위 쉼표가 필요하면
+  `type="number"`와 `maskNumber`를 함께 씁니다.
+- 검색창이나 필터 입력란. 이때는 `leftIcon`에 아이콘을 넣습니다.
+
+## 언제 쓰지 않나요
+
+- 두 줄 이상이거나 줄바꿈이 필요한 글은 `Textarea`를 씁니다.
+- 비밀번호나 비밀 값은 `PasswordInput`을 씁니다.
+- 한 칸에 한 글자씩 넣는 짧은 인증 코드는 `PinInput`을 씁니다.
+- 정해진 목록에서 고르는 값은 `SelectField`, `ComboboxField`, `Radio`를 씁니다.
+- 날짜나 월은 `SingleDatePicker`, `RangeDatePicker`, `MonthPicker`를 씁니다.
+- 정확한 숫자보다 대략적인 위치가 중요한 값은 `Slider`를 씁니다.
+
+## 동작을 바꾸는 속성
+
+</Ko>
+
+<ArgTypes
+  of={InputStories}
+  include={[
+    'maskNumber',
+    'trimWhiteSpace',
+    'noSpaces',
+    'invalid',
+    'leftIcon',
+    'rightIcon',
+  ]}
+/>
+
+<En>
+
+| Prop             | What it does                                                                                                                  | Use for                                                                |
+| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| `maskNumber`     | Only with `type="number"`. Renders a text input that shows `2,000,000` while `onChange` receives the digits (`2000000`).      | Amounts, limits, counts                                                |
+| `noSpaces`       | Blocks the space key and strips every space, including pasted ones.                                                           | Email addresses, IDs, codes                                            |
+| `trimWhiteSpace` | Blocks a leading space and trims **both ends on every keystroke**, so a space between two words cannot be typed, only pasted. | Single-word values only. Never names or titles; trim at submit instead |
+| `invalid`        | Red border only. It does not tell assistive technology anything; see Accessibility.                                           | With `FieldRow` `error`                                                |
+| `readOnly`       | `bg.subtle` fill and muted text. The value can still be selected and copied.                                                  | Values the user may see but not change                                 |
+| `disabled`       | The fixed `disabled.*` pair, not reduced opacity.                                                                             | A field that does not apply right now                                  |
+
+Good to know:
+
+- While a Korean IME is composing, Enter is swallowed, so a half-typed syllable
+  never submits the form.
+- `onKeyDown` is only called for Enter. Listen on a wrapper if you need other
+  keys.
+- On touch devices the text is raised to 16px so iOS Safari does not zoom the
+  page on focus.
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+| 속성             | 하는 일                                                                                                                             | 쓰는 곳                                                                            |
+| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| `maskNumber`     | `type="number"`와 함께일 때만 동작합니다. 화면에는 `2,000,000`으로 보이고 `onChange`에는 숫자만(`2000000`) 전달됩니다.              | 금액, 한도, 개수                                                                   |
+| `noSpaces`       | 스페이스 키를 막고, 붙여 넣은 내용까지 모든 공백을 지웁니다.                                                                        | 이메일 주소, 아이디, 코드                                                          |
+| `trimWhiteSpace` | 맨 앞 공백을 막고 **입력할 때마다 앞뒤 공백을 지웁니다.** 그래서 단어 사이 공백은 타이핑으로 넣을 수 없고 붙여 넣기로만 들어갑니다. | 한 단어짜리 값에만 씁니다. 이름이나 제목에는 쓰지 말고 제출할 때 공백을 정리합니다 |
+| `invalid`        | 테두리만 빨갛게 바꿉니다. 보조기술에는 아무것도 알리지 않습니다. 접근성 절을 보세요.                                                | `FieldRow`의 `error`와 함께                                                        |
+| `readOnly`       | `bg.subtle` 배경에 흐린 글자로 바뀝니다. 값을 선택하고 복사할 수는 있습니다.                                                        | 보여 주되 바꾸면 안 되는 값                                                        |
+| `disabled`       | 투명도를 낮추지 않고 고정된 `disabled.*` 색 한 쌍을 씁니다.                                                                         | 지금은 해당하지 않는 입력란                                                        |
+
+알아 두면 좋은 점
+
+- 한글 입력기로 글자를 조합하는 동안에는 Enter를 무시합니다. 조합 중인 글자 때문에 폼이
+  제출되지 않습니다.
+- `onKeyDown`은 Enter를 눌렀을 때만 호출됩니다. 다른 키가 필요하면 바깥 요소에서
+  받습니다.
+- 터치 기기에서는 글자를 16px로 키워 iOS Safari가 초점을 받을 때 화면을 확대하지 않게
+  합니다.
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={InputStories.DoLabelAbove} />
+<Verdict
+  kind="do"
+  en="Put a visible label above the field with FieldRow. The label stays while the user types, and FieldRow connects it to the input."
+  ko="FieldRow로 입력란 위에 보이는 라벨을 둡니다. 라벨은 입력하는 동안에도 남아 있고, FieldRow가 라벨과 입력란을 연결합니다."
+/>
+
+<Canvas of={InputStories.DontPlaceholderAsLabel} />
+<Verdict
+  kind="dont"
+  en="Use the placeholder as the label. It disappears on the first keystroke, and the field has no name for a screen reader."
+  ko="플레이스홀더를 라벨 대신 쓰지 마세요. 첫 글자를 입력하면 사라지고, 화면 낭독기에는 입력란의 이름이 없습니다."
+/>
+
+<Canvas of={InputStories.DoErrorInWords} />
+<Verdict
+  kind="do"
+  en="Pass the message to FieldRow error. The field turns invalid for assistive technology too, and the message is read with it."
+  ko="오류 문구는 FieldRow의 error에 넘깁니다. 보조기술에도 오류 상태가 전달되고, 입력란과 함께 문구가 읽힙니다."
+/>
+
+<Canvas of={InputStories.DontBorderOnly} />
+<Verdict
+  kind="dont"
+  en="Signal an error with the red border alone. Colour is the only cue, and nothing says what to fix (WCAG 1.4.1, 3.3.1)."
+  ko="빨간 테두리만으로 오류를 알리지 마세요. 색 말고는 단서가 없고, 무엇을 고쳐야 하는지도 알 수 없습니다(WCAG 1.4.1, 3.3.1)."
+/>
+
+<Canvas of={InputStories.DoMaskedAmount} />
+<Verdict
+  kind="do"
+  en="Use type='number' with maskNumber for amounts. The reader sees separators; your form state keeps plain digits."
+  ko="금액에는 type='number'와 maskNumber를 씁니다. 화면에는 쉼표가 보이고, 폼 상태에는 숫자만 남습니다."
+/>
+
+<Canvas of={InputStories.DoCountWithLimit} />
+<Verdict
+  kind="do"
+  en="When you set maxLength, show the count with MaxLengthIndicator in the label row, so the limit is not a surprise."
+  ko="maxLength를 정했다면 라벨 줄에 MaxLengthIndicator로 글자 수를 보여 줍니다. 그래야 제한에 걸려도 당황하지 않습니다."
+/>
+
+<En>
+
+## Content
+
+- Label: a noun phrase in sentence case, no colon ("Work email", not
+  "Work Email:"). Korean labels are nouns too: 업무용 이메일, not 이메일을
+  입력하세요.
+- Placeholder: an example of the format (`name@company.com`), never the label
+  and never an instruction the user needs after they start typing.
+- Helper text: one sentence on what happens with the value or which format is
+  accepted. Put it in `FieldRow` `helperText`, not in the placeholder.
+- Error text: say what is wrong and how to fix it, in one sentence: 이메일 주소
+  형식이 아닙니다.
+
+## Accessibility
+
+What Input does for you:
+
+- Renders a native `<input>`, so Tab, typing, selection and copy and paste
+  work as the browser provides.
+- Shows a visible focus state: a `primary.main` border and 1px ring (WCAG
+  2.4.7).
+- Inside `FormControl` or `FieldRow` it takes the field's id, so the label is
+  associated, and it picks up `aria-invalid`, `required` and the
+  `aria-describedby` that points at helper and error text.
+
+What you still have to do:
+
+- **Name every field.** Use `FieldRow` `label` or `FormControl` + `FormLabel`.
+  A placeholder is not a name, and an icon is not either (WCAG 4.1.2; KWCAG
+  5.3.4.1 레이블 제공).
+- **Mark errors on the field, not on the input.** The `invalid` prop changes
+  the border only. Set `error` on `FieldRow` (or `invalid` on `FormControl`)
+  so the state and the message reach assistive technology (WCAG 3.3.1).
+- **Say what the field is for** with `type` and `autoComplete` (`email`,
+  `name`, `tel`), so browsers and assistive tools can fill it (WCAG 1.3.5).
+- An icon-only `rightIcon` that does something (clear, search) has to be a
+  button with an `aria-label`. A decorative `leftIcon` gets `aria-hidden`.
+
+## Tokens
+
+Input has no styles file; the table follows the values in `Input.tsx`, which
+`Select.styles.ts` mirrors.
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 라벨: 문장형 대소문자의 명사구로 쓰고 쌍점을 붙이지 않습니다("Work email",
+  "Work Email:"이 아님). 한국어 라벨도 명사로 씁니다. "이메일을 입력하세요"가 아니라
+  "업무용 이메일"입니다.
+- 플레이스홀더: 형식의 예(`name@company.com`)만 씁니다. 라벨을 대신하지 않고, 입력을
+  시작한 뒤에도 필요한 안내를 넣지 않습니다.
+- 도움말: 값이 어디에 쓰이는지나 받는 형식을 한 문장으로 씁니다. 플레이스홀더가 아니라
+  `FieldRow`의 `helperText`에 넣습니다.
+- 오류 문구: 무엇이 잘못됐고 어떻게 고치는지 한 문장으로 씁니다. 예: 이메일 주소
+  형식이 아닙니다.
+
+## 접근성
+
+Input이 알아서 하는 일
+
+- 네이티브 `<input>`을 그리므로 Tab 이동, 입력, 선택, 복사와 붙여 넣기가 브라우저
+  기본대로 동작합니다.
+- 초점을 받으면 `primary.main` 테두리와 1px 링으로 눈에 띄게 표시합니다(WCAG 2.4.7).
+- `FormControl`이나 `FieldRow` 안에 두면 필드의 id를 받아 라벨과 연결되고,
+  `aria-invalid`, `required`, 도움말과 오류 문구를 가리키는 `aria-describedby`도
+  함께 받습니다.
+
+직접 챙겨야 하는 일
+
+- **모든 입력란에 이름을 붙입니다.** `FieldRow`의 `label`이나 `FormControl`과
+  `FormLabel`을 씁니다. 플레이스홀더나 아이콘은 이름이 아닙니다(WCAG 4.1.2, KWCAG
+  5.3.4.1 레이블 제공).
+- **오류는 입력란이 아니라 필드에 표시합니다.** `invalid` 속성은 테두리만 바꿉니다.
+  `FieldRow`에 `error`를 넘기거나 `FormControl`에 `invalid`를 주어야 오류 상태와 문구가
+  보조기술에 전달됩니다(WCAG 3.3.1).
+- **입력란의 용도를 밝힙니다.** `type`과 `autoComplete`(`email`, `name`, `tel`)를
+  지정하면 브라우저와 보조 도구가 값을 채워 줄 수 있습니다(WCAG 1.3.5).
+- 지우기나 검색처럼 동작하는 `rightIcon`은 `aria-label`이 있는 버튼이어야 합니다.
+  꾸밈용 `leftIcon`에는 `aria-hidden`을 붙입니다.
+
+## 토큰
+
+Input에는 스타일 파일이 없습니다. 아래 표는 `Input.tsx`에 적힌 값을 따르며,
+`Select.styles.ts`도 같은 값을 씁니다.
+
+</Ko>
+
+<Canvas of={InputStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **FieldRow** / **FormControl**: label, helper text and error around the
+  field.
+- **Textarea**, **PasswordInput**, **PinInput**: other text entry.
+- **SelectField** / **ComboboxField**: a choice from a list.
+- **MaxLengthIndicator**: the character count next to the label.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **FieldRow** / **FormControl**: 입력란을 둘러싼 라벨, 도움말, 오류 문구.
+- **Textarea**, **PasswordInput**, **PinInput**: 다른 텍스트 입력.
+- **SelectField** / **ComboboxField**: 목록에서 고르는 값.
+- **MaxLengthIndicator**: 라벨 옆 글자 수 표시.
+
+</Ko>