<%= pb_rails("radio", props: {
  text: "Power",
  input_options: {
    tabindex: 0
  },
  name: "group 1",
  value: "Power"
}) %>

<br>

<%= pb_rails("radio", props: {
  text: "Nitro",
  name: "group 1",
  value: "Nitro"
}) %>

<br>

<%= pb_rails("radio", props: {
  text: "Google",
  name: "group 1",
  value: "Google"
}) %>

<%= pb_rails("radio", props: {
  text: "Power"
}) do %>
  <input type="radio" name="group 3" value="power" >
<% end %>

<br>

<%= pb_rails("radio", props: {
  text: "Nitro"
}) do %>
  <input type="radio"  name="group 3" value="nitro" checked>
<% end %>

<br>

<%= pb_rails("radio", props: {
  text: "Google"
}) do %>
  <input type="radio"name="group 3" value="google">
<% end %>

<%= pb_rails("radio", props: {
  error: true,
  text: "Power",
  name: "group 1",
  value: "Power"
}) %>

<%= pb_rails("radio", props: {
  text: "Radio with Options",
  input_options: {
    id: "radio-id",
    name: "radio-name",
    value: "radio-value",
    class: "radio-class",
  }
}) %>

<%= pb_rails("flex") do %>
  <%= pb_rails("radio", props: {
    alignment: "vertical",
    text: "Power",
    input_options: {
      tabindex: 0
    },
    margin_right: "sm",
    name: "group 1",
    value: "Power"
  }) %>

  <%= pb_rails("radio", props: {
    alignment: "vertical",
    text: "Nitro",
    margin_right: "sm",
    name: "group 1",
    value: "Nitro"
  }) %>

  <%= pb_rails("radio", props: {
    alignment: "vertical",
    text: "Google",
    name: "group 1",
    value: "Google"
  }) %>
<% end %>

<%= pb_rails("flex", props: {orientation: "column"}) do %>
    <%= pb_rails("flex/flex_item") do %>
        <%= pb_rails("radio", props: {
            text: "Disabled unselected",
            input_options: {
                tabindex: 0,
                disabled: true,
            },
            margin_bottom: "xs",
            name: "DisabledGroup",
            value: "Disabled unselected",
        }) %>
    <% end %>
    <%= pb_rails("flex/flex_item") do %>
        <%= pb_rails("radio", props: {
            text: "Disabled selected",
            input_options: {
                tabindex: 0,
                disabled: true,
            },
            checked: true,
            name: "DisabledGroup",
            value: "Disabled selected"
        }) %>
    <% end %>
<% end %>

<%
  options = [
    { label: "Orange", value: "Orange" },
    { label: "Red", value: "Red" },
    { label: "Green", value: "Green" },
    { label: "Blue", value: "Blue" },
  ]
%>

<%= pb_rails("radio", props: {
  custom_children: true,
  label: "Select",
  margin_bottom: "sm",
  name: "Group1",
  value: "Select",
}) do %>
  <%= pb_rails("select", props: {
    min_width: "xs",
    options: options,
  }) %>
<% end %>

<%= pb_rails("radio", props: {
  custom_children: true,
  label: "Typeahead",
  margin_bottom: "sm",
  name: "Group1",
  value: "Typeahead",
}) do %>
  <%= pb_rails("typeahead", props: {
      id: "typeahead-radio",
      is_multi: false,
      min_width: "xs",
      options: options,
      placeholder: "Select...",
    })
  %>
<% end %>

<%= pb_rails("radio", props: {
  custom_children: true,
  label: "Typography",
  name: "Group1",
  value: "Typography",
}) do %>
  <%= pb_rails("title", props: {
      text: "Custom Typography",
    })
  %>
<% end %>