Filters

The Filter component is a group of radio buttons where choosing one option hides the others and shows a reset button.

Basic Usage

The basic filter component takes an options array and uses a div element with radio buttons styled as buttons.

= daisy_filter(name: "frameworks", options: ["Svelte", "Vue", "React"])

With Hash Options

You can also provide options as a hash with values and labels to customize the display.

Preview

Code

:ruby
  options = [
    { label: "Ruby", value: "ruby" },
    { label: "JavaScript", value: "js" },
    { label: "Python", value: "py" }
  ]

= daisy_filter(name: "languages", options: options)

Custom Button Styles

You can customize the styles of the buttons and reset button using CSS classes.

Preview

Code

= daisy_filter(name: "priorities", css: "items-center") do |f|
  - f.with_reset_button(css: "btn-accent btn-sm rounded-full")
  - f.with_option(label: "Low", css: "btn-outline btn-success")
  - f.with_option(label: "Medium", css: "btn-outline btn-warning")
  - f.with_option(label: "High", css: "btn-outline btn-error")

Filter Within Form

Filters can be used within forms to submit the selected value.

Preview

Code

= form_with(url: "", method: :get, scope: :search, class: "mb-4") do |form|
  = daisy_filter(name: "categories") do |f|
    - f.with_option(label: "Category 1")
    - f.with_option(label: "Category 2")
  = form.submit "Apply Filters", class: "btn btn-primary mt-4"

Form Builder

You can also use the form builder to create a filter.

Preview

Code

= form_with(url: "", method: :get, scope: :search, class: "mb-4") do |form|
  = form.daisy_filter(:category, options: ["Technology", "Science", "Arts"])
  = form.submit "Apply Filters", class: "btn btn-primary mt-4"

Made with by Profoundry .

Filters

Basic Usage

With Hash Options

Custom Button Styles

Filter Within Form

Form Builder

Docs

Guides

Hero

Daisy