Select

Version 0.9.0-next.31 for Svelte Kit ^1.0.1

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.

prefix_options array<Object>
This takes the same properties as the options array above. The difference is that the options passed in here will be added to the front of the list.

The reason that you may want to do things this way is because when you fetch data from an API, you might already have an array. In that case you would typically just map over the array to create the options.

However, if you're building some kind of filter, you might want to add some additional options like "All", "None", etc. In that case, it's a little annoying to add those to your array and you get extra code, it's sloppy, and typescript will yell at you. You end up with a lot of JS in your script tag just to format the options.

So this will let you add those manual, handcrafted options.

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.

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"
    validation="required|string"
    vob={true}
    onselect={(value) => {
      //This will fire for every item you select with the value of the selected item
      console.log(value);
    }}
    prefix_options={[
      { label: "All Shapes", value: "all" },
      { divider: true, label: "Remaining Options" },
    ]}
    options={[
      {
        label: "Circle",
        value: "circle",
        caption: "No corners!",
        img: icon_circle,
        color: "error",
      },
      {
        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,
      },
      {
        divider: true,
      },
      {
        label: "No Icon Shape",
        value: null,
      },
    ]}
  />
</Card>