<%= pb_rails("toggle", props: {
  checked: true
}) %>

<br>

<%= pb_rails("toggle", props: {
  checked: false
}) %>

<%= pb_rails("toggle", props: {
  checked: true,
  disabled: true
}) %>

<br>

<%= pb_rails("toggle", props: {
  checked: false,
  disabled: true
}) %>

<%= pb_rails("title", props: { size: 4, text: "Which of the following vehicles do you own?" }) %>

<br>

<%= pb_rails("caption", props: { text: "Car" }) %>
<%= pb_rails("toggle", props: {
  size: "sm",
  checked: false,
  name: "vehicle",
  value: "car"
}) %>

<br>

<%= pb_rails("caption", props: { text: "Bike" }) %>
<%= pb_rails("toggle", props: {
  size: "sm",
  checked: false,
  name: "vehicle",
  value: "bike"
}) %>

<%= pb_rails("toggle", props: { size: "sm" }) do %>
  <input class="my_custom_input" type="checkbox" name="custom_checkbox" value="ABC" />
<% end %>

<%= pb_rails("title", props: { size: 4, text: "Select one option:" }) %>

<br>

<%= pb_rails("caption", props: { text: "Walk" }) %>
<%= pb_rails("toggle", props: { size: "sm" }) do %>
  <input type="radio" name="modes of transportation" value="walk">
<% end %>

<br/>

<%= pb_rails("caption", props: { text: "Bike" }) %>
<%= pb_rails("toggle", props: { size: "sm" }) do %>
  <input type="radio" name="modes of transportation" value="bike">
<% end %>

<br/>

<%= pb_rails("caption", props: { text: "Ride" }) %>
<%= pb_rails("toggle", props: { size: "sm" }) do %>
  <input type="radio" name="modes of transportation" value="ride">
<% end %>

<%= pb_rails("toggle" , props: {
  text: "Toggle with Options",
  input_options: {
    id: "toggle-id",
    name: "toggle-name",
    value: "toggle-value",
    class: "toggle-class",
    checked: true
  }
}) %>