FeaturedNew
TagsTag Input Chips
A text field that turns typed values into removable chips, with the chips wrapping above the input.
#tags#chips#input
3 frameworksAdvanced
Loading…
One chip rendered at three sizes, with padding and text scaling together per step.
<!-- One chip, three sizes - padding and text scale together per step. -->
<div class="flex flex-wrap items-center gap-2">
<span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200">Small</span>
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-sm font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200">Medium</span>
<span class="inline-flex items-center rounded-full bg-gray-100 px-3 py-1.5 text-base font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200">Large</span>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | - | Accessible label announced while loading. |
size | 'sm' | 'md' | 'lg' | 'md' | Size |
className | string | - | Additional classes merged onto the root element. |
The `size` prop picks `sm`, `md` or `lg`; each maps to a static class string so padding and font size step in proportion. Pass `className` to extend a single instance without touching the size scale.