Search field
사용자가 키워드나 문장을 입력하여 데이터, 콘텐츠, 또는 기능을 검색할 수 있도록 도와주는 요소를 제공합니다. 자동완성, 추천 검색어, 최근 검색어 등의 기능을 함께 제공할 수 있습니다.
SearchField 는 주로 상단 영역에 컨텐츠를 검색할 수 있는 요소로 사용합니다.
import { SearchField } from '@wanteddev/wds';
const Demo = () => {
return (
<SearchField width="25ch" placeholder="Search field" />
)
}
export default Demo;2가지 크기를 제공합니다.
- small
- medium (default)
import { FlexBox, SearchField } from '@wanteddev/wds';
const Demo = () => {
return (
<FlexBox gap="12px" flexDirection="column" alignItems="center">
<SearchField size="small" width="25ch" placeholder="Small" />
<SearchField size="medium" width="25ch" placeholder="Medium" />
</FlexBox>
)
}
export default Demo;validation 을 통해 여러 상태를 표현할 수 있습니다.
- default
- readOnly
- disabled
import { FlexBox, SearchField } from '@wanteddev/wds';
const Demo = () => {
return (
<FlexBox gap="12px" flexDirection="column" alignItems="center">
<SearchField width="25ch" placeholder="Default" />
<SearchField width="25ch" placeholder="Read Only" readOnly />
<SearchField width="25ch" placeholder="Disabled" disabled />
</FlexBox>
)
}
export default Demo;기본적으로 비제어 컴포넌트로 동작합니다.
value, onChange prop 을 사용하면 제어 컴포넌트로 동작합니다.
제어 컴포넌트와 비제어 컴포넌트는 React 공식 문서 를 참조해주세요.
import { FlexBox, SearchField } from '@wanteddev/wds';
import { useState } from 'react';
const Demo = () => {
const [value, setValue] = useState('');
return (
<FlexBox alignItems="center" flexDirection="column" gap="12px">
<SearchField
defaultValue="Uncontrolled"
placeholder="Uncontrolled"
width="25ch"
/>
<SearchField
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Controlled"
width="25ch"
/>
</FlexBox>
)
}
export default Demo;정해진 viewport에 따라 아래 옵션을 override 할 수 있습니다.
- size