# `PhiaUi.Components.Chip`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/chip.ex#L1)

Interactive Chip component for tags, filters, and multi-select interfaces.

Chips are compact elements that represent an input, attribute, or action.
They can be toggleable (with `on_click`), dismissible (with `dismissible`),
or purely presentational when neither is set.

## Variants

| Variant     | Use case                                       |
|-------------|------------------------------------------------|
| `:default`  | Secondary background, neutral tag              |
| `:outline`  | Bordered, transparent background               |
| `:filled`   | Primary background, high-emphasis tag          |

## Sizes

| Size       | Classes                  |
|------------|--------------------------|
| `:sm`      | text-xs px-2 py-0.5      |
| `:default` | text-sm px-3 py-1        |
| `:lg`      | text-base px-4 py-1.5    |

## Examples

    <%!-- Basic chip --%>
    <.chip>React</.chip>

    <%!-- Dismissible chip --%>
    <.chip dismissible={true} on_dismiss="remove_tag" value="elixir">
      Elixir
    </.chip>

    <%!-- Toggleable chip --%>
    <.chip selected={true} on_click="toggle" value="vue">Vue</.chip>

    <%!-- Chip group --%>
    <.chip_group>
      <.chip :for={tech <- @techs} value={tech}>{tech}</.chip>
    </.chip_group>

# `chip`

Renders a chip element.

When `on_click` is provided, the chip renders as a `<button>` with
`aria-pressed` reflecting the `selected` state. Otherwise it renders
as a `<span>`.

When `dismissible={true}`, a small × button is appended inside the chip.
Use `on_dismiss` to handle the dismiss event and `value` to identify
which chip was dismissed.

## Examples

    <%!-- Presentational chip --%>
    <.chip>Tag</.chip>

    <%!-- Toggle chip --%>
    <.chip on_click="toggle_filter" value="active" selected={@active}>
      Active
    </.chip>

    <%!-- Dismissible chip with value --%>
    <.chip dismissible={true} on_dismiss="remove_skill" value="elixir">
      Elixir
    </.chip>

## Attributes

* `value` (`:string`) - Value sent with phx-value-value for click/dismiss events. Defaults to `nil`.
* `variant` (`:atom`) - Visual style variant. Defaults to `:default`. Must be one of `:default`, `:outline`, or `:filled`.
* `size` (`:atom`) - Size variant. Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`.
* `selected` (`:boolean`) - Whether the chip is in a selected/active state. Defaults to `false`.
* `dismissible` (`:boolean`) - Whether to render a dismiss (×) button. Defaults to `false`.
* `on_click` (`:string`) - Event name for toggle click; renders chip as <button> when set. Defaults to `nil`.
* `on_dismiss` (`:string`) - Event name for the dismiss button click. Defaults to `nil`.
* `disabled` (`:boolean`) - Disables the chip and adds pointer-events-none opacity-50. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `inner_block` (required) - Chip label content.

# `chip_group`

Renders a wrapping container for a group of chips.

Provides flex layout with wrapping and consistent gap between chips.

## Example

    <.chip_group>
      <.chip :for={tag <- @tags} value={tag} on_dismiss="remove_tag" dismissible={true}>
        {tag}
      </.chip>
    </.chip_group>

## Attributes

* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
## Slots

* `inner_block` (required) - Chip items.

---

*Consult [api-reference.md](api-reference.md) for complete listing*