PhiaUi.Components.Chip (phia_ui v0.1.17)

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>

Summary

Functions

chip(assigns)

Renders a chip element.

chip_group(assigns)

Renders a wrapping container for a group of chips.

Functions

chip(assigns)

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(assigns)

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.