Select

You can use a Select component in two different ways. Either use the option prop to pass an array of options dynamically, define the options manually inside the component. Here's a basic example of the Select component in action:

<script>
  import { Select } from "theui-svelte";

  let data = [
    { text: "Option 1", value: "1" },
    { text: "Option 2", value: "2", selected: true },
    { text: "Option 3 (Disabled)", value: "3", disabled: true }
  ]
</script>

<Select label="Select an option" options={data} />

Or, you can use the <option> tag directly.

<script>
  import { Select } from "theui-svelte";
</script>

<Select label="Choose a category">
  <option value="books">Books</option>
  <option value="electronics">Electronics</option>
  <option value="clothing" disabled>Clothing (Unavailable)</option>
</Select>

The value prop allows you to set a default selection for the Select component. If a value is provided, the corresponding option will be pre-selected when the component loads. This ensures that users see a predefined choice without needing to manually select it. If no value is set, the first option (if available) will be selected by default.

<Select label="Select an option" options={data} value="2" />

The variant prop controls the appearance of the Select component. It has two options:

• bordered(default): Displays the select input with a visible border, making it distinct and well-defined.
• flat: Removes the border for a more minimalistic and seamless look.

If floatingLabel is enabled, it works with both variants, ensuring the label moves above the input when a value is selected.

<Select label="Select an option" options={data} variant="bordered" />
<Select label="Select an option" options={data} variant="flat" />

<!-- Using label prop -->
<Select label="Select an option" options={data} />

<!-- Using label snippet -->
<Select options={data}>
  {#snippet label()}
    <div>
      <Label>Select an option</Label>
      <HelperText>This is helper text for the select input!</HelperText>
    </div>
  {/snippet}
</Select>

Label using floatingLabel.

<Select ... floatingLabel />
<Select ... floatingLabel variant="flat" />

The size prop controls the overall size of the Select component. Available options are "sm", "md", "lg", and "xl", with "md" as the default. This affects padding, font size, and spacing for a consistent UI.

<Select ... size="sm" />
<Select ... size="md" />
<Select ... size="lg" />
<Select ... size="xl" />

The size prop controls the border-radius of the Select component. You can choose from "sm", "md", "lg", "xl", "full", and "none"to determine the roundness of the corners. The default value is "md" , giving the component a moderate rounded appearance.

<Select ... rounded="none" />
<Select ... rounded="sm" />
<Select ... rounded="md" />
<Select ... rounded="lg" />
<Select ... rounded="xl" />
<Select ... rounded="full" />

The animationSpeed prop allows you to control the speed of animations in the Select component. Available values include "none", "slower", "slow", "normal", "fast", "faster", with "normal" being the default. Adjust this value to make transitions quicker or slower based on your needs.

<Select ... animationSpeed="slower" />
<Select ... animationSpeed="slow" />
<Select ... animationSpeed="normal" />
<Select ... animationSpeed="fast" />
<Select ... animationSpeed="faster" />
<Select ... animationSpeed="none" />

The helperText prop allows you to add additional guidance or information below the Select component. It can be a simple string or a Snippet for more complex content. This is useful for providing instructions or any other contextual information to enhance user experience.

<!-- Using prop -->
<Select label="Select an option" options={data} helperText="This is helper text for the select input!" />
<!-- Using Snippet -->
<Select label="Select an option" options={data}>
  {#snippet helperText()}
    This is helper text for the select input!
  {/snippet}
</Select>

The reset prop removes all default styles, applying only the styles you provide. This gives full control over the appearance, making it ideal for custom designs.

<Select ... size="sm" rounded="full" reset />

The Select component provides several options to customize its appearance, ensuring it blends seamlessly with different UI designs.

• wrapperClasses: Style the outer container of the Select component to adjust margins, padding, or additional styling needs.
• labelClasses: Customize the label's style by applying custom classes, allowing better control over typography, spacing, and alignment.
• class attribute: Directly modify the Select element itself, giving you control over borders, background, and overall appearance.

By using these customization options, you can easily align the Select component with your design system while maintaining consistency across forms.

<Select label="Select an option" options={data}
  wrapperClasses="flex-row items-center gap-16"
  labelClasses="text-xl text-blue-500"
  class="text-blue-500 focus:ring-blue-500 focus:border-blue-500"
/>