Themes
Advanced
Utils
Components

Text Field

버튼과 아이콘을 위한 선택적 슬롯이 있는 사용자 입력을 받습니다.

View sourceReport an issueView in Playground
<TextField.Root placeholder="Search the docs…">

	<TextField.Slot>

		<MagnifyingGlassIcon height="16" width="16" />

	</TextField.Slot>

</TextField.Root>

API Reference

Root

슬롯과 입력 부분을 그룹화합니다. 이 컴포넌트는 div 요소를 기반으로 하며 common margin props를 지원합니다.

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

Slot

입력과 관련된 아이콘이나 버튼을 포함합니다.

PropTypeDefault
side
"left" | "right"
No default value
color
enum
No default value
gap
Responsive<enum | string>
No default value
px
Responsive<enum | string>
No default value
pl
Responsive<enum | string>
No default value
pr
Responsive<enum | string>
No default value

Examples

Size

size prop을 사용하여 크기를 제어합니다.

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

	<Box maxWidth="200px">

		<TextField.Root size="1" placeholder="Search the docs…" />

	</Box>

	<Box maxWidth="250px">

		<TextField.Root size="2" placeholder="Search the docs…" />

	</Box>

	<Box maxWidth="300px">

		<TextField.Root size="3" placeholder="Search the docs…" />

	</Box>

</Flex>

크기를 조절할 때 버튼과 함께 사용할 때는 일치하는 컴포넌트 크기를 사용하는 것이 좋습니다. 그러나 크기 1 입력과 버튼을 함께 사용하지 마십시오. 이 크기에서는 다른 상호작용 요소를 중첩할 수 있는 충분한 수직 공간이 없습니다.

<Flex direction="column" gap="3" maxWidth="400px">

	<Box maxWidth="200px">

		<TextField.Root placeholder="Search the docs…" size="1">

			<TextField.Slot>

				<MagnifyingGlassIcon height="16" width="16" />

			</TextField.Slot>

		</TextField.Root>

	</Box>



	<Box maxWidth="250px">

		<TextField.Root placeholder="Search the docs…" size="2">

			<TextField.Slot>

				<MagnifyingGlassIcon height="16" width="16" />

			</TextField.Slot>

			<TextField.Slot>

				<IconButton size="1" variant="ghost">

					<DotsHorizontalIcon height="14" width="14" />

				</IconButton>

			</TextField.Slot>

		</TextField.Root>

	</Box>



	<Box maxWidth="300px">

		<TextField.Root placeholder="Search the docs…" size="3">

			<TextField.Slot>

				<MagnifyingGlassIcon height="16" width="16" />

			</TextField.Slot>

			<TextField.Slot pr="3">

				<IconButton size="2" variant="ghost">

					<DotsHorizontalIcon height="16" width="16" />

				</IconButton>

			</TextField.Slot>

		</TextField.Root>

	</Box>

</Flex>

Variant

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

<Flex direction="column" gap="3" maxWidth="250px">

	<TextField.Root variant="surface" placeholder="Search the docs…" />

	<TextField.Root variant="classic" placeholder="Search the docs…" />

	<TextField.Root variant="soft" placeholder="Search the docs…" />

</Flex>

Color

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

<Flex direction="column" gap="3" maxWidth="250px">

	<TextField.Root
		color="indigo"
		variant="soft"
		placeholder="문서를 검색…"
	/>

	<TextField.Root color="green" variant="soft" placeholder="문서를 검색…" />

	<TextField.Root color="red" variant="soft" placeholder="문서를 검색…" />

</Flex>

Radius

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

<Flex direction="column" gap="3" maxWidth="250px">

	<TextField.Root radius="none" placeholder="문서를 검색…" />

	<TextField.Root radius="large" placeholder="문서를 검색…" />

	<TextField.Root radius="full" placeholder="문서를 검색…" />

</Flex>
PreviousText Area
NextTooltip
Edit this page on GitHub.