Filter Bar

A standardized filter bar for index pages with responsive grid layout and optional clear button.

Basic

    <.filter_bar on_change="filter">
  <:filter>
    <.input type="text" name="search" value={@search} placeholder="Search..." />
  </:filter>
  <:filter>
    <.select id="status-select" name="status" value={@status}>
      <.select_option value="" label="All" />
      <.select_option value="active" label="Active" />
    </.select>
  </:filter>
</.filter_bar>
  

With Clear Button

Show a clear button when filters are active using show_clear and on_clear props.

With Clear

    <.filter_bar on_change="filter" on_clear="clear_filters" show_clear={@has_filters}>
  <:filter>
    <.input type="text" name="search" value={@search} placeholder="Search..." />
  </:filter>
  <:filter>
    <.select id="status-select" name="status" value={@status}>
      <.select_option value="" label="All Statuses" />
      <.select_option value="active" label="Active" />
    </.select>
  </:filter>
</.filter_bar>
  

Column Count

Control the grid layout with the cols prop (1-6 columns).

Two Columns

    <.filter_bar on_change="filter" cols={2}>
  <:filter>
    <.input type="text" name="search" placeholder="Search..." />
  </:filter>
  <:filter>
    <.select id="status-select" name="status" value={@status}>
      <.select_option value="" label="All" />
      <.select_option value="active" label="Active" />
    </.select>
  </:filter>
</.filter_bar>
  

Four Columns

    <.filter_bar on_change="filter" cols={4}>
  <:filter><.input type="text" name="name" placeholder="Name" /></:filter>
  <:filter><.input type="text" name="email" placeholder="Email" /></:filter>
  <:filter>
    <.select id="role-select" name="role" value="">
      <.select_option value="" label="All Roles" />
      <.select_option value="admin" label="Admin" />
    </.select>
  </:filter>
  <:filter>
    <.select id="status-select" name="status" value="">
      <.select_option value="" label="All" />
      <.select_option value="active" label="Active" />
    </.select>
  </:filter>
</.filter_bar>
  