Catalog Filters

<.control>

ConnieUI.Filters

HEEx
<div class="w-3xl">
  <ConnieUI.Filters.bar>
    <ConnieUI.Filters.control>
      <ConnieUI.Forms.select
        field={@form[:status]}
        placeholder="Any status"
        options={["Draft", "Pending", "Signed"]}
      />
    </ConnieUI.Filters.control>
  </ConnieUI.Filters.bar>
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

Set by the example

class

Docs

One control in a `bar/1`: full width on a phone, and from `sm` up a share of the row it grows into, up to a width a select reads well at. `wide` is for a search that stands on its own at the start of the row, followed by `actions/1`: wider than a select, and not growing.
Attribute Type Default Description
wide :boolean false
class :any nil
Slot Slot attributes Description
inner_block *