x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="flex flex-col gap-4 max-w-sm"> <div class="midwest-form-group"> <label for="reason-select" class="midwest-label">Reason for contact</label> <select id="reason-select" class="block w-full rounded-2xl border-gray-1 border shadow-sm px-3 py-2"> <option value="general">General inquiry</option> <option value="support">Support</option> <option value="other">Other</option> </select> </div> <fieldset data-controller="midwest-show-if" data-midwest-show-if-watch-value="#reason-select" data-midwest-show-if-is-value="other" 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="other_reason-11fc0"> Please specify </label> </div> <input type="text" name="other_reason" id="other_reason-11fc0" placeholder="Tell us more..." data-midwest-input-target="input" /> </div> </fieldset></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="flex flex-col gap-4 max-w-sm"> <div class="midwest-form-group"> <label for="reason-select" class="midwest-label">Reason for contact</label> <select id="reason-select" class="block w-full rounded-2xl border-gray-1 border shadow-sm px-3 py-2"> <option value="general">General inquiry</option> <option value="support">Support</option> <option value="other">Other</option> </select> </div> <%= midwest_show_if watch: "#reason-select", is: "other" do %> <%= midwest_form_input( name: :other_reason, label: "Please specify", placeholder: "Tell us more..." ) %> <% end %></div>Default
Shows a conditional section when a select field matches a target value. Change the select to "Other" to reveal the text input.
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/default
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."