Motile UI

Checkbox

선택 가능한 체크박스 컴포넌트입니다. standard, rounded, square 3가지 스타일과 large, medium, small 3가지 크기를 제공합니다. filled, disabled 속성을 지원하며, color 속성으로 원하는 색상을 자유롭게 지정할 수 있습니다.

미리보기

사용법

1"use client";
2
3import { Checkbox } from "motile-ui";
4import { useState } from "react";
5
6type CheckboxChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;
7
8export default function PreviewExample() {
9  const [checked, setChecked] = useState(false);
10
11  const handleChange: CheckboxChangeHandler = (e) => {
12    setChecked(e.target.checked);
13  };
14
15  return (
16    <Checkbox checked={checked} onChange={handleChange} label="동의합니다" />
17  );
18}

API 레퍼런스

Checkbox

체크박스 컴포넌트

속성타입기본값설명
variant"standard" | "rounded" | "square""standard"체크박스 스타일
size"large" | "medium" | "small""medium"체크박스 크기
labelstring-체크박스 옆 라벨 텍스트
colorstring-커스텀 체크 색상 (CSS 색상 값)
filledbooleanfalse체크 아이콘을 항상 표시 (회색 배경 → 색상 배경)
checkedboolean-체크박스 선택 상태
disabledbooleanfalse체크박스 비활성화 여부
onChange(e: ChangeEvent) => void-상태가 변경될 때 실행되는 함수

기본 <code>input</code> HTML 속성을 모두 사용할 수 있습니다.

예제

스타일 (Variants)

3가지 체크박스 스타일을 제공합니다.

1"use client";
2
3import { Checkbox } from "motile-ui";
4import { useState } from "react";
5
6type CheckboxChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;
7
8export default function VariantsExample() {
9  const [defaultChecked, setDefaultChecked] = useState(true);
10  const [roundedChecked, setRoundedChecked] = useState(true);
11  const [squareChecked, setSquareChecked] = useState(true);
12
13  const handleDefaultChange: CheckboxChangeHandler = (e) => {
14    setDefaultChecked(e.target.checked);
15  };
16
17  const handleRoundedChange: CheckboxChangeHandler = (e) => {
18    setRoundedChecked(e.target.checked);
19  };
20
21  const handleSquareChange: CheckboxChangeHandler = (e) => {
22    setSquareChecked(e.target.checked);
23  };
24
25  return (
26    <div
27      style={{
28        display: "flex",
29        flexDirection: "column",
30        gap: "8px",
31      }}
32    >
33      <Checkbox
34        variant="standard"
35        checked={defaultChecked}
36        onChange={handleDefaultChange}
37        label="Standard"
38      />
39      <Checkbox
40        variant="rounded"
41        checked={roundedChecked}
42        onChange={handleRoundedChange}
43        label="Rounded"
44      />
45      <Checkbox
46        variant="square"
47        checked={squareChecked}
48        onChange={handleSquareChange}
49        label="Square"
50      />
51    </div>
52  );
53}

크기 (Sizes)

3가지 크기를 제공합니다.

1"use client";
2
3import { Checkbox } from "motile-ui";
4import { useState } from "react";
5
6type CheckboxChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;
7
8export default function SizesExample() {
9  const [largeChecked, setLargeChecked] = useState(true);
10  const [mediumChecked, setMediumChecked] = useState(true);
11  const [smallChecked, setSmallChecked] = useState(true);
12
13  const handleLargeChange: CheckboxChangeHandler = (e) => {
14    setLargeChecked(e.target.checked);
15  };
16
17  const handleMediumChange: CheckboxChangeHandler = (e) => {
18    setMediumChecked(e.target.checked);
19  };
20
21  const handleSmallChange: CheckboxChangeHandler = (e) => {
22    setSmallChecked(e.target.checked);
23  };
24
25  return (
26    <div
27      style={{
28        display: "flex",
29        flexDirection: "column",
30        gap: "8px",
31      }}
32    >
33      <Checkbox
34        size="large"
35        checked={largeChecked}
36        onChange={handleLargeChange}
37        label="Large"
38      />
39      <Checkbox
40        size="medium"
41        checked={mediumChecked}
42        onChange={handleMediumChange}
43        label="Medium"
44      />
45      <Checkbox
46        size="small"
47        checked={smallChecked}
48        onChange={handleSmallChange}
49        label="Small"
50      />
51    </div>
52  );
53}

커스텀 색상

color 속성으로 원하는 색상을 지정할 수 있습니다.

1"use client";
2
3import { Checkbox } from "motile-ui";
4import { useState } from "react";
5
6type CheckboxChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;
7
8export default function ColorsExample() {
9  const [color1, setColor1] = useState(true);
10  const [color2, setColor2] = useState(true);
11  const [color3, setColor3] = useState(true);
12  const [color4, setColor4] = useState(true);
13  const [color5, setColor5] = useState(true);
14
15  const handleColor1Change: CheckboxChangeHandler = (e) => {
16    setColor1(e.target.checked);
17  };
18
19  const handleColor2Change: CheckboxChangeHandler = (e) => {
20    setColor2(e.target.checked);
21  };
22
23  const handleColor3Change: CheckboxChangeHandler = (e) => {
24    setColor3(e.target.checked);
25  };
26
27  const handleColor4Change: CheckboxChangeHandler = (e) => {
28    setColor4(e.target.checked);
29  };
30
31  const handleColor5Change: CheckboxChangeHandler = (e) => {
32    setColor5(e.target.checked);
33  };
34
35  return (
36    <div
37      style={{
38        display: "flex",
39        flexDirection: "column",
40        gap: "8px",
41      }}
42    >
43      <Checkbox
44        color="#10b981"
45        checked={color1}
46        onChange={handleColor1Change}
47        label="Green"
48      />
49      <Checkbox
50        color="#f59e0b"
51        checked={color2}
52        onChange={handleColor2Change}
53        label="Orange"
54      />
55      <Checkbox
56        color="#8b5cf6"
57        checked={color3}
58        onChange={handleColor3Change}
59        label="Purple"
60      />
61      <Checkbox
62        color="#ec4899"
63        checked={color4}
64        onChange={handleColor4Change}
65        label="Pink"
66      />
67      <Checkbox
68        color="#06b6d4"
69        checked={color5}
70        onChange={handleColor5Change}
71        label="Cyan"
72      />
73    </div>
74  );
75}

Filled 스타일

filled 속성으로 체크 아이콘을 항상 표시할 수 있습니다.

1"use client";
2
3import { Checkbox } from "motile-ui";
4import { useState } from "react";
5
6type CheckboxChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;
7
8export default function FilledExample() {
9  const [filledChecked, setFilledChecked] = useState(true);
10  const [filledUnchecked, setFilledUnchecked] = useState(false);
11
12  const handleChecked: CheckboxChangeHandler = (e) => {
13    setFilledChecked(e.target.checked);
14  };
15
16  const handleUnchecked: CheckboxChangeHandler = (e) => {
17    setFilledUnchecked(e.target.checked);
18  };
19
20  return (
21    <div
22      style={{
23        display: "flex",
24        flexDirection: "column",
25        gap: "8px",
26      }}
27    >
28      <Checkbox
29        filled
30        checked={filledChecked}
31        onChange={handleChecked}
32        label="Filled + Checked"
33      />
34      <Checkbox
35        filled
36        checked={filledUnchecked}
37        onChange={handleUnchecked}
38        label="Filled + Unchecked"
39      />
40    </div>
41  );
42}

비활성화

disabled 속성으로 체크박스를 비활성화할 수 있습니다.

1"use client";
2
3import { Checkbox } from "motile-ui";
4
5export default function DisabledExample() {
6  return (
7    <div
8      style={{
9        display: "flex",
10        flexDirection: "column",
11        gap: "8px",
12      }}
13    >
14      <Checkbox disabled checked={true} label="비활성 + 체크됨" />
15      <Checkbox disabled checked={false} label="비활성 + 체크 안됨" />
16    </div>
17  );
18}

조합

다양한 속성을 조합해서 사용할 수 있습니다.

1"use client";
2
3import { Checkbox } from "motile-ui";
4import { useState } from "react";
5
6type CheckboxChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;
7
8export default function CombinationsExample() {
9  const [combo1, setCombo1] = useState(true);
10  const [combo2, setCombo2] = useState(true);
11  const [combo3, setCombo3] = useState(true);
12
13  const handleCombo1Change: CheckboxChangeHandler = (e) => {
14    setCombo1(e.target.checked);
15  };
16
17  const handleCombo2Change: CheckboxChangeHandler = (e) => {
18    setCombo2(e.target.checked);
19  };
20
21  const handleCombo3Change: CheckboxChangeHandler = (e) => {
22    setCombo3(e.target.checked);
23  };
24
25  return (
26    <div
27      style={{
28        display: "flex",
29        flexDirection: "column",
30        gap: "8px",
31      }}
32    >
33      <Checkbox
34        variant="rounded"
35        size="large"
36        color="#8b5cf6"
37        checked={combo1}
38        onChange={handleCombo1Change}
39        label="Rounded + Large + Color"
40      />
41      <Checkbox
42        variant="square"
43        size="small"
44        filled
45        checked={combo2}
46        onChange={handleCombo2Change}
47        label="Square + Small + Filled"
48      />
49      <Checkbox
50        size="medium"
51        color="#f59e0b"
52        filled
53        checked={combo3}
54        onChange={handleCombo3Change}
55        label="Medium + Color + Filled"
56      />
57    </div>
58  );
59}
Checkbox | Motile UI