Command Palette

Search for a command to run...

Components / Inputs

Chips

சில்லுகள்

Chips are compact, interactive elements that represent an attribute, action, filter, or input. They allow users to make selections and filter content.

சில்லுகள் என்பவை தேர்வுகள், வடிகட்டிகள் அல்லது உள்ளீடுகளைக் குறிக்கும் சிறிய ஊடாடும் பொத்தான்கள் ஆகும்.

Filter Chips

Filter chips represent options that can be toggled to filter content. Multiple chips can be selected at the same time.

Component preview
Filter chipsவடிகட்டி சில்லுகள்

Choice Chips (Single Select)

Choice chips allow selecting a single choice from a set. Selection of one chip clears previous selection.

Component preview
Choice chipsஒற்றைத் தேர்வு சில்லுகள்

Input Chips (Dismissible)

Input chips represent discrete pieces of information. They include a trailing close button to allow removing them.

Component preview
Input chipsஉள்ளீட்டு சில்லுகள்

Disabled State

Disabled chips are unclickable and visually muted. Apply to chips when their action is temporarily unavailable.

Component preview
Disabled chipsமுடக்கப்பட்ட சில்லுகள்

Anatomy

Structure

Anatomy

4 parts documented for implementation and review.

Component map
1

Container

கொள்கலன்required<div>

Pill-shaped wrapper with fully rounded corners (rounded-full) to match premium pill targets. Includes safe vertical padding to prevent Tamil script vertical clipping. Uses role='checkbox' with aria-checked for toggleable chips.

2

Leading Icon

முன்னணி சின்னம்

Optional icon providing additional context, scaled to 14x14px.

3

Label Text

உரைrequired

Bilingual or script-localized text representing the attribute, filter, or value.

4

Close Button

மூடும் பொத்தான்

Available on input/dismissible chips to trigger item deletion. Has aria-label='Remove chip' for screen readers.

Props

API

Props

5 props
variant
Type
"default" | "filter" | "action" | "input"
Default
"default"
Description
Semantic visual styling variant.
selected
Type
boolean
Default
false
Description
Whether the chip is active/selected.
onSelectedChange
Type
(selected: boolean) => void
Default
-
Description
Callback triggered when the chip's selection state changes. Enables role='checkbox' semantics.
onClose
Type
() => void
Default
-
Description
If provided, renders a dismiss icon on the right and binds the delete click.
icon
Type
React.ReactNode
Default
-
Description
Optional leading icon slot.

Accessibility

  • Toggleable chips (with onSelectedChange) use role="checkbox" and aria-checked to communicate state to screen readers.
  • Non-toggleable interactive chips use role="button" and are keyboard-activatable with Enter and Space.
  • Close button on input chips has aria-label="Remove chip" for clear screen reader announcements.
  • All interactive chips have tabIndex=0 for keyboard focus access.
  • Tamil script labels should use font-tamil class for proper glyph rendering.

Best practices

Use chips for dynamic filtering and selections
வடிகட்டுதல் மற்றும் தேர்வுகளுக்குச் சில்லுகளைப் பயன்படுத்தவும்

Use chips to let users quickly toggle, add, or delete filters dynamically in content search pages.

தேடல்களில் வடிகட்டுதலை எளிமையாக்கச் சில்லுகளைப் பயன்படுத்தவும்.

Don't use chips as permanent main navigation links
சில்லுகளை நிரந்தர வழிசெலுத்தல் இணைப்புகளாகப் பயன்படுத்தாதே

Chips are for context filtering or input values. Use standard Tab components or Navigation menu links for main navigation.

வழிசெலுத்தலுக்கு தாவல் (Tabs) கூறுகளைப் பயன்படுத்துங்கள், சில்லுகளை அல்ல.

Keep chip labels concise — under 3 words
சில்லு உரையை 3 சொற்களுக்குள் வைக்கவும்

Short labels are scannable and fit well on mobile screens. Use truncation or abbreviations for long text.

குறுகிய உரைகள் எளிதாகப் படிக்கக்கூடியவை மற்றும் கைபேசி திரைகளில் நன்கு பொருந்தும்.

Don't use chips for boolean on/off — use Switch instead
ஆன்/ஆஃப் மாற்றுக்கு சில்லு பயன்படுத்தாதே — Switch பயன்படுத்து

Binary settings like 'Enable dark mode' should use a Switch component. Chips are for multi-select filtering, not single toggles.

இருமம் அமைப்புகளுக்கு Switch கூறு பயன்படுத்தவும். சில்லுகள் பல தேர்வு வடிகட்டலுக்கானவை.