Select

Select

The select element lets the user select from one of multiple options.



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
option[].caption string
More details to give about the option
option[].img string
An image that will be displayed on the left of the text
option[].icon string
An icon to display on the right. Defaults to an arrow. You can remove this by setting this value to null
option[].onselect function
A function that can be run if this option is selected
option[].hidden boolean
Will hide the option if set to true, defaults to false
option[].break boolean
Will create a line break as this option. The line break is not rendered as a clickable option, it's just for aesthetics.

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.

type string select
The default type is select but if it's really important for you to have values that are numbers, you can change the type to select-number.

validate_on_blur boolean
If true, runs the validation checks when focus is lost from the input.

vob boolean
Just an alias for validate_on_blur. Set whichever is best for you.

search boolean
If you want the select element to be searchable. By default, if you have more than 5 options, the search will be turned on. You can override this behavior if you want to.

search_threshold number 0.3
How strict you want the search to be. A number of 0 would mean an exact match while 1 would be a very lax match that would max everything

onselect function(value)
A function that will fire every time an item is selected. The function will be provided one argument, which will be the value of the value of the selected option.

Demo
Select a shape
No Icon Shape

This is the description that will be below the select element. Any description field can render inline html elements.

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

  import icon_circle from "$lib/img/circle.svg";
  import icon_square from "$lib/img/square.svg";
  import icon_triangle from "$lib/img/triangle.svg";
  import icon_pentagon from "$lib/img/pentagon.svg";
  import icon_star from "$lib/img/star.svg";
</script>

<Card height100={true}>
  <CardHeader title="Demo" border={false} />
  <Select
    id="select_example"
    value={null}
    label="Select a shape"
    error="Please select a shape"
    desc="This is the description that will be below the select element. Any description field can render inline html elements."
    type="select"
    onselect={(value) => {
      //This will fire for every item you select with the value of the selected item
      console.log(value);
    }}
    validation="required|string"
    vob={true}
    options={[
      {
        label: "Circle",
        value: "circle",
        caption: "No corners!",
        img: icon_circle,
      },
      {
        break: true, //Add horizontal line
      },
      {
        label: "Square",
        value: "square",
        img: icon_square,
      },
      {
        label: "Pentagon",
        value: "pent",
        img: icon_pentagon,
        onselect: () => {
          console.log("Whoa, you like pentagons?");
        },
      },
      {
        label: "Triangle",
        value: "tri",
        img: icon_triangle,
      },
      {
        label: "Star",
        value: "star",
        img: icon_star,
      },
      {
        label: "No Icon Shape",
        value: null,
      },
      {
        label: "Empty String Value",
        value: "",
      },
    ]}
  />
</Card>