Radio

RadioGroup

Like a Checkbox, a radio let's a user chose from one of multiple options. Fundamentally you get the same results using Bubbles with the RadioGroup and Select elements.

The best practice if to use the radio in forms and times when the user has less options to choose from.



Props


id string
If you're using this inside of the form, you'll want to include the id value, which will be the property value in JSON data when the form is submitted.

options array<Object>
An array that will contain the options the user can select.

Show Details
option[].label string
The text the user sees for the option
option[].value string
The value that will be added for the url query param

value boolean
If the component is checked or not.

label string
The label you want explaining what the checkbox is.

desc string
The option to add more text to explain the option the user is selecting in more detail. This element allows you to include html elements, so you can add an outbound link with an anchor tag.

error string An error occurred
The error text you want to show if this item fails validation.

validation string
The validation string you want to use for this form. See validateInputs for more information.

form_indent boolean true
Causes the elements to have spacing on the left and right to align it better with other elements in a form.

background boolean true
Toggle a gray background around the element. This makes the element look in a form with other text and select input.

Radio Group

Choose sandwich

This is the longer description for the RadioGroup if you think it needs more explanation. You can add html elements like links.

 
<script>
  import { RadioGroup } from "bubbles-ui";
</script>

<RadioGroup
  id="sandwich.type"
  value="burger"
  error="Please select an option"
  label="Choose sandwich"
  validation="required|string"
  background={false}
  desc="This is the longer description for the RadioGroup if you think it needs more explanation. You can add html elements like <a href='https://google.com' target='blank'>links</a>."
  options={[
    {
      label: "Burger",
      value: "burger",
    },
    {
      label: "Hot Dog",
      value: "hd",
    },
    {
      label: "Grilled Cheese",
      value: "gc",
    },
  ]}
/>
Radio Group Segment Style

User Permissions

Select permissions for an API Key

API Key Permissions

Select permissions for an API Key