3.0.1






Toggle

Sizes



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

<br>

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



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

<br>

<%= pb_rails("toggle", props: {
  size: "md",
  checked: false
}) %>
Name and Value

Which of the following vehicles do you own?


Car

Bike

Close
<%= 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"
}) %>
Custom checkbox input


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

Select one option:


Male

Female

Other

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

<br>

<%= pb_rails("caption", props: { text: "Male" }) %>
<%= pb_rails("toggle", props: { size: "sm" }) do %>
  <input type="radio" name="gender" value="male">
<% end %>

<br/>

<%= pb_rails("caption", props: { text: "Female" }) %>
<%= pb_rails("toggle", props: { size: "sm" }) do %>
  <input type="radio" name="gender" value="female">
<% end %>

<br/>

<%= pb_rails("caption", props: { text: "Other" }) %>
<%= pb_rails("toggle", props: { size: "sm" }) do %>
  <input type="radio" name="gender" value="other">
<% end %>
Available Props
id
data
classname
aria
children
checked
name
size
value