SutraUI.FilterBar (Sutra UI v0.2.0)

View Source

A filter bar component for index pages with consistent styling and layout.

The filter bar provides a standardized way to add filter controls to list pages, with support for multiple filter inputs and an optional clear filters button.

Uses a responsive grid layout that adapts to screen sizes.

Examples

# Basic filter bar (3 columns by default)
<.filter_bar on_change="filter">
  <:filter>
    <.input type="text" name="search" value={@filters.search} placeholder="Search..." />
  </:filter>
  <:filter>
    <.input
      type="select"
      name="status"
      value={@filters.status}
      options={[{"All Statuses", ""}, {"Active", "active"}, {"Inactive", "inactive"}]}
    />
  </:filter>
</.filter_bar>

# With custom column count
<.filter_bar on_change="filter" cols={2}>
  <:filter>
    <.input type="text" name="search" value={@search} />
  </:filter>
  <:filter>
    <.input type="select" name="status" value={@status} options={@status_options} />
  </:filter>
</.filter_bar>

# With clear button
<.filter_bar on_change="filter" on_clear="clear_filters" show_clear={@has_filters}>
  <:filter>
    <.input type="text" name="search" value={@search} />
  </:filter>
</.filter_bar>

Summary

Functions

filter_bar(assigns)

Renders a filter bar with consistent layout and styling.

Functions

filter_bar(assigns)

Renders a filter bar with consistent layout and styling.

Attributes

  • on_change - Required. The phx-change event name.
  • on_clear - Optional. The phx-click event name for the clear button.
  • show_clear - Whether to show the clear filters button. Defaults to false.
  • cols - Number of columns in the grid (1-6). Defaults to 3.
  • class - Additional CSS classes.

Slots

  • filter - Required. One or more filter input elements.

Attributes

  • on_change (:string) (required) - The phx-change event name.
  • on_clear (:string) - The phx-click event name for clear button. Defaults to nil.
  • show_clear (:boolean) - Whether to show clear filters button. Defaults to false.
  • cols (:integer) - Number of columns in the grid (1-6). Defaults to 3.
  • class (:any) - Additional CSS classes. Defaults to nil.

Slots

  • filter (required) - Filter input elements.