Component

AppliedFilters

현재 필터·정렬 조건을 가로 스크롤 가능한 chip 행으로 표시합니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { useState } from 'react'

import { type AppliedFilterChip, AppliedFilters, Button } from '@amineslab/ui'

import { RotateCcw } from '@amineslab/ui/icons'

function FiltersExample({ label = '상태: 진행 중', clearAll = true } = {}) {
    const [chips, setChips] = useState<AppliedFilterChip[]>([
        { id: 'status', label, onRemove: () => setChips([]) },
        {
            id: 'sort',
            label: '최근 등록',
            kind: 'sort',
            onRemove: () => setChips((current) => current.filter((chip) => chip.id !== 'sort')),
        },
    ]);
    return (<div className="w-full space-y-3">
      <AppliedFilters chips={chips} onClearAll={clearAll ? () => setChips([]) : undefined}/>
      <Button variant="outline" onClick={() => setChips([{ id: 'status', label, onRemove: () => setChips([]) }])} startIcon={RotateCcw}>
        조건 다시 넣기
      </Button>
    </div>);
}

export default function ExamplePreview() {
  return (<FiltersExample key={"상태: 진행 중"} {...({"label":"상태: 진행 중","clearAll":true} as const)}/>)
}

Props

@amineslab/ui에서 AppliedFilters를 가져옵니다.

import { AppliedFilters } from '@amineslab/ui'

`AppliedFilters`

선택된 조건의 제거·전체 해제를 제공합니다.

Name	Type	Default	Description
`chips*`	`readonly AppliedFilterChip[]`	-	표시할 조건 목록입니다.
`onClearAll`	`() => void`	-	모든 조건을 초기화합니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

필터 chip

상태: 진행 중

최근 등록

import { useState } from 'react'

import { type AppliedFilterChip, AppliedFilters, Button } from '@amineslab/ui'

import { RotateCcw } from '@amineslab/ui/icons'

function FiltersExample({ label = '상태: 진행 중', clearAll = true } = {}) {
    const [chips, setChips] = useState<AppliedFilterChip[]>([
        { id: 'status', label, onRemove: () => setChips([]) },
        {
            id: 'sort',
            label: '최근 등록',
            kind: 'sort',
            onRemove: () => setChips((current) => current.filter((chip) => chip.id !== 'sort')),
        },
    ]);
    return (<div className="w-full space-y-3">
      <AppliedFilters chips={chips} onClearAll={clearAll ? () => setChips([]) : undefined}/>
      <Button variant="outline" onClick={() => setChips([{ id: 'status', label, onRemove: () => setChips([]) }])} startIcon={RotateCcw}>
        조건 다시 넣기
      </Button>
    </div>);
}

export default function ExamplePreview() {
  return (<FiltersExample />)
}

사용 기준

권장하는 사용

chip은 id가 안정적이어야 하고 onRemove는 해당 조건만 제거합니다.
두 개 이상이면 전체 해제를 함께 노출하며, 모바일은 실제 ScrollArea를 가로 방향으로 사용합니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Tab: 각 chip 제거와 전체 해제로 이동합니다.
Enter / Space: 선택한 조건을 제거합니다.