Search field

사용자가 키워드나 문장을 입력하여 데이터, 콘텐츠, 또는 기능을 검색할 수 있도록 도와주는 요소를 제공합니다. 자동완성, 추천 검색어, 최근 검색어 등의 기능을 함께 제공할 수 있습니다.

Design

Web

iOS

Android

Basic search field

SearchField 는 주로 상단 영역에 컨텐츠를 검색할 수 있는 요소로 사용합니다.

2가지 variant를 사용할 수 있습니다.

solid (default)
outlined

import { FlexBox, SearchField } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox gap="12px" flexDirection="column" alignItems="center">
      <SearchField variant="solid" width="25ch" placeholder="Solid" />
      <SearchField variant="outlined" width="25ch" placeholder="Outlined" />
    </FlexBox>
  )
}

export default Demo;

Sizes

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

medium
large (default)

Solid

Outlined

import { FlexBox, SearchField, Typography } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox gap="16px" flexDirection="column" alignItems="center">
      <FlexBox gap="12px" alignItems="center">
        <Typography variant="body2-reading" sx={{ width: '60px' }}>Solid</Typography>

        <FlexBox gap="12px" flexDirection="column">
          <SearchField variant="solid" size="medium" width="25ch" placeholder="Medium" />
          <SearchField variant="solid" size="large" width="25ch" placeholder="Large" />
        </FlexBox>
      </FlexBox>

       <FlexBox gap="12px" alignItems="center">
        <Typography variant="body2-reading" sx={{ width: '60px' }}>Outlined</Typography>

        <FlexBox gap="12px" flexDirection="column">
          <SearchField variant="outlined" size="medium" width="25ch" placeholder="Medium" />
          <SearchField variant="outlined" size="large" width="25ch" placeholder="Large" />
        </FlexBox>
      </FlexBox>
    </FlexBox>
  )
}

export default Demo;

States

validation 을 통해 여러 상태를 표현할 수 있습니다.

default
disabled

Solid

Outlined

import { FlexBox, SearchField, Typography } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox gap="16px" flexDirection="column" alignItems="center">
      <FlexBox gap="12px" alignItems="center">
        <Typography variant="body2-reading" sx={{ width: '60px' }}>Solid</Typography>

        <FlexBox gap="12px" flexDirection="column">
          <SearchField variant="solid" width="25ch" placeholder="Default" />
          <SearchField variant="solid" width="25ch" placeholder="Disabled" disabled />
        </FlexBox>
      </FlexBox>

       <FlexBox gap="12px" alignItems="center">
        <Typography variant="body2-reading" sx={{ width: '60px' }}>Outlined</Typography>

        <FlexBox gap="12px" flexDirection="column">
          <SearchField variant="outlined" width="25ch" placeholder="Default" />
          <SearchField variant="outlined" width="25ch" placeholder="Disabled" disabled />
        </FlexBox>
      </FlexBox>
    </FlexBox>
  )
}

export default Demo;

Controlled

기본적으로 비제어 컴포넌트로 동작합니다.

value, onChange prop 을 사용하면 제어 컴포넌트로 동작합니다.

제어 컴포넌트와 비제어 컴포넌트는 React 공식 문서 를 참조해주세요.

import { FlexBox, SearchField } from '@montage-ui/core';
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;

API

정해진 viewport에 따라 아래 옵션을 override 할 수 있습니다.

size

Name	Types	defaultValue
`disabled`	`boolean`	`-`
`width`	`Property.Width<string \| number> \| undefined`	`-`
`onReset`	`(prevValue: string) => void`	`-`
`wrapperRef`	`Ref<HTMLDivElement>`	`-`
`size`	`"medium" \| "large"`	`-`
`variant`	`"solid" \| "outlined"`	`"solid"`
`sx`	`SxProp`	`-`
`xl`	`Merge<Pick<SearchFieldDefaultProps, "size" \| "width">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`lg`	`Merge<Pick<SearchFieldDefaultProps, "size" \| "width">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`md`	`Merge<Pick<SearchFieldDefaultProps, "size" \| "width">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`sm`	`Merge<Pick<SearchFieldDefaultProps, "size" \| "width">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`xs`	`Merge<Pick<SearchFieldDefaultProps, "size" \| "width">, { sx?: CSSInterpolation; }> \| undefined`	`-`