Demo
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Default Radio -->
<div class="flex">
  <div class="flex items-center h-5"><input class="text-brand bg-neutral-secondary-medium border-default-medium focus:ring-brand focus:ring-2 w-4 h-4" type="radio" value="visible" name="person[state]" id="person_state_visible" /></div>
  <div class="ms-2 text-sm">
    <label class="font-medium text-heading" for="person_state_visible">Default radio</label>
  </div>
</div>
<!-- Checked State -->
<div class="flex">
  <div class="flex items-center h-5"><input class="text-brand bg-neutral-secondary-medium border-default-medium focus:ring-brand focus:ring-2 w-4 h-4" type="radio" value="hidden" checked="checked" name="person[state]" id="person_state_hidden" /></div>
  <div class="ms-2 text-sm">
    <label class="font-medium text-heading" for="person_state_hidden">Checked radio</label>
  </div>
</div>
1
2
3
4
5
# Default Radio
render(Flowbite::InputField::RadioButton.new(attribute: :state, form: form, label: {content: "Default radio"}, value: "visible"))
# Checked State
render(Flowbite::InputField::RadioButton.new(attribute: :state, form: form, label: {content: "Checked radio"}, value: "hidden"))

Use the default example of a radio component with the checked and unchecked state.

No params configured.