Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
<div class="flex flex-col gap-6 p-8 max-w-sm">
  <div class="midwest-checkbox midwest-form-group ">
    <div class="midwest-form-group__top">
      <input type="checkbox" id="playground_checkbox-12200" value="1" class="checkbox" aria-checked="false" />
      <label class="midwest-label " for="playground_checkbox-12200">
        Accept terms
      </label>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="flex flex-col gap-6 p-8 max-w-sm">
  <%= midwest_form_checkbox(
    label: params[:label] || "Accept terms",
    description: params[:description].presence,
    size: (params[:size] || "default").to_sym,
    checked: params[:checked] == "true",
    disabled: params[:disabled] == "true",
    error: params[:error].presence,
    required: params[:required] == "true",
    name: "playground_checkbox",
    value: "1"
  ) %>
</div>

Playground

Interactive preview with all available checkbox options.

Param Description Input

Label text displayed next to the checkbox

Help text displayed below the label

Checkbox size

Whether the checkbox is initially checked

Disabled appearance and behaviour

Error message to display

Show required asterisk on the label

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Checkbox/playground

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."