Motile UI

Switch

On/Off 상태를 전환하는 스위치 컴포넌트입니다. smooth, elastic, bounce 3가지 애니메이션 효과를 제공합니다.

미리보기

사용법

1import { useState } from "react";
2import { Switch } from "motile-ui";
3
4function App() {
5  const [checked, setChecked] = useState(false);
6
7  return (
8    <Switch
9      checked={checked}
10      onChange={(e) => setChecked(e.target.checked)}
11    />
12  );
13}

API 레퍼런스

Switch

On/Off 상태를 전환하는 Switch 컴포넌트

속성타입기본값설명
variant"smooth" | "elastic" | "bounce""smooth"스위치 애니메이션 효과
colorstring-스위치 활성화 색상
checkedboolean-스위치 활성화 상태
disabledbooleanfalse스위치 비활성화 여부
onChange(e: ChangeEvent<HTMLInputElement>) => void-상태가 변경될 때 실행되는 함수

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

예제

Smooth 애니메이션

Smooth
1"use client";
2
3import { useState } from "react";
4import { Switch } from "motile-ui";
5
6export default function VariantSmoothExample() {
7  const [checked, setChecked] = useState(true);
8
9  return (
10    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "16px", padding: "24px" }}>
11      <Switch
12        variant="smooth"
13        checked={checked}
14        onChange={(e) => setChecked(e.target.checked)}
15      />
16      <span style={{ fontSize: "14px", color: "#374151" }}>Smooth</span>
17    </div>
18  );
19}

Elastic 애니메이션

Elastic
1"use client";
2
3import { useState } from "react";
4import { Switch } from "motile-ui";
5
6export default function VariantElasticExample() {
7  const [checked, setChecked] = useState(true);
8
9  return (
10    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "16px", padding: "24px" }}>
11      <Switch
12        variant="elastic"
13        checked={checked}
14        onChange={(e) => setChecked(e.target.checked)}
15      />
16      <span style={{ fontSize: "14px", color: "#374151" }}>Elastic</span>
17    </div>
18  );
19}

Bounce 애니메이션

Bounce
1"use client";
2
3import { useState } from "react";
4import { Switch } from "motile-ui";
5
6export default function VariantBounceExample() {
7  const [checked, setChecked] = useState(true);
8
9  return (
10    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "16px", padding: "24px" }}>
11      <Switch
12        variant="bounce"
13        checked={checked}
14        onChange={(e) => setChecked(e.target.checked)}
15      />
16      <span style={{ fontSize: "14px", color: "#374151" }}>Bounce</span>
17    </div>
18  );
19}

비활성화

Disabled (Off)
Disabled (On)
1"use client";
2
3import { Switch } from "motile-ui";
4
5export default function DisabledExample() {
6  return (
7    <div style={{ display: "flex", flexDirection: "column", gap: "24px", padding: "24px" }}>
8      <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
9        <Switch disabled checked={false} onChange={() => {}} />
10        <span style={{ fontSize: "14px", color: "#9ca3af" }}>Disabled (Off)</span>
11      </div>
12
13      <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
14        <Switch disabled checked={true} onChange={() => {}} />
15        <span style={{ fontSize: "14px", color: "#9ca3af" }}>Disabled (On)</span>
16      </div>
17    </div>
18  );
19}
Switch | Motile UI