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-radio midwest-form-group "> <div class="midwest-form-group__top"> <input type="radio" id="playground_radio-13500" value="1" class="radio" aria-checked="false" /> <label class="midwest-label " for="playground_radio-13500"> Option A </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_radio( label: params[:label] || "Option A", 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_radio", value: "1" ) %></div>Playground
Interactive preview with all available radio options.
| Param | Description | Input |
|---|---|---|
|
Label text displayed next to the radio |
|
|
|
Help text displayed below the label |
|
|
|
Radio button size |
|
|
|
Whether the radio is initially selected |
|
|
|
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.
Figma embed for Radio/playground
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."