x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="flex flex-col gap-4 max-w-sm"> <label class="flex items-center gap-2"> <input type="checkbox" id="has-referral" value="true"> I have a referral code </label> <fieldset data-controller="midwest-show-if" data-midwest-show-if-watch-value="#has-referral" data-midwest-show-if-is-value="true" data-midwest-show-if-negate-value="false" class="midwest-show-if" hidden="hidden" disabled="disabled"> <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input"> <div class="midwest-form-group__top"> <label class="midwest-label " for="referral_code-f820"> Referral code </label> </div> <input type="text" name="referral_code" id="referral_code-f820" placeholder="Enter code" data-midwest-input-target="input" /> </div> </fieldset></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="flex flex-col gap-4 max-w-sm"> <label class="flex items-center gap-2"> <input type="checkbox" id="has-referral" value="true"> I have a referral code </label> <%= midwest_show_if watch: "#has-referral", is: "true" do %> <%= midwest_form_input( name: :referral_code, label: "Referral code", placeholder: "Enter code" ) %> <% end %></div>Checkbox
Shows a section when a checkbox is checked.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Show If/checkbox
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."