Themes
Advanced
Utils
Components

Switch

체크박스의 대안인 토글 스위치입니다.

View sourceReport an issueView in Playground
<Switch defaultChecked />

API Reference

이 컴포넌트는 Switch primitive에서 props를 상속받으며, common margin props를 지원합니다.

PropTypeDefault
size
Responsive<"1" | "2" | "3">
"2"
variant
"classic" | "surface" | "soft"
"surface"
color
enum
No default value
highContrast
boolean
No default value
radius
"none" | "small" | "medium" | "large" | "full"
No default value

Examples

Size

size prop을 사용하여 스위치의 크기를 조절합니다.

<Flex align="center" gap="2">

	<Switch size="1" defaultChecked />

	<Switch size="2" defaultChecked />

	<Switch size="3" defaultChecked />

</Flex>

Variant

variant prop을 사용하여 스위치의 시각적 스타일을 제어합니다.

<Flex gap="2">

	<Flex direction="column" gap="3">

		<Switch variant="surface" />

		<Switch variant="classic" />

		<Switch variant="soft" />

	</Flex>



	<Flex direction="column" gap="3">

		<Switch variant="surface" defaultChecked />

		<Switch variant="classic" defaultChecked />

		<Switch variant="soft" defaultChecked />

	</Flex>

</Flex>

Color

color prop을 사용하여 특정 색상을 지정합니다.

<Flex gap="2">

	<Switch color="indigo" defaultChecked />

	<Switch color="cyan" defaultChecked />

	<Switch color="orange" defaultChecked />

	<Switch color="crimson" defaultChecked />

</Flex>

High-contrast

highContrast prop을 사용하여 라이트 모드에서 색상 대비를 높입니다.

<Grid rows="2" gapX="2" gapY="3" display="inline-grid" flow="column">

	<Switch color="indigo" defaultChecked />

	<Switch color="indigo" defaultChecked highContrast />

	<Switch color="cyan" defaultChecked />

	<Switch color="cyan" defaultChecked highContrast />

	<Switch color="orange" defaultChecked />

	<Switch color="orange" defaultChecked highContrast />

	<Switch color="crimson" defaultChecked />

	<Switch color="crimson" defaultChecked highContrast />

	<Switch color="gray" defaultChecked />

	<Switch color="gray" defaultChecked highContrast />

</Grid>

Radius

radius prop을 사용하여 특정 반경 값을 지정합니다.

<Flex gap="3">

	<Switch radius="none" defaultChecked />

	<Switch radius="small" defaultChecked />

	<Switch radius="full" defaultChecked />

</Flex>

Alignment

Text 내에서 Switch를 조합하면 텍스트의 첫 번째 줄과 자동으로 정렬됩니다.

<Flex direction="column" gap="3">

	<Text as="label" size="2">

		<Flex gap="2">

			<Switch size="1" defaultChecked /> Sync settings

		</Flex>

	</Text>



	<Text as="label" size="3">

		<Flex gap="2">

			<Switch size="2" defaultChecked /> Sync settings

		</Flex>

	</Text>



	<Text as="label" size="4">

		<Flex gap="2">

			<Switch size="3" defaultChecked /> Sync settings

		</Flex>

	</Text>

</Flex>

여러 줄의 텍스트와 함께 사용할 때도 자동으로 잘 정렬됩니다.

Disabled

네이티브 disabled 속성을 사용하여 비활성화된 스위치를 생성합니다.

<Flex direction="column" gap="2">

	<Text as="label" size="2">

		<Flex gap="2">

			<Switch size="1" />

			Off

		</Flex>

	</Text>



	<Text as="label" size="2">

		<Flex gap="2">

			<Switch size="1" defaultChecked />

			On

		</Flex>

	</Text>



	<Text as="label" size="2" color="gray">

		<Flex gap="2">

			<Switch size="1" disabled />

			On

		</Flex>

	</Text>



	<Text as="label" size="2" color="gray">

		<Flex gap="2">

			<Switch size="1" disabled defaultChecked />

			Off

		</Flex>

	</Text>

</Flex>
PreviousSpinner
NextTable
Edit this page on GitHub.