Select

Sizes

<DemoSpaceX>
  <VelvetSelect @size="sm" as |select|>
    <select.Option @value="first">First</select.Option>
    <select.Option @value="second">Second</select.Option>
    <select.Option @value="third">Third</select.Option>
  </VelvetSelect>
  <VelvetSelect @size="md" as |select|>
    <select.Option @value="first">First</select.Option>
    <select.Option @value="second">Second</select.Option>
    <select.Option @value="third">Third</select.Option>
  </VelvetSelect>
  <VelvetSelect @size="lg" as |select|>
    <select.Option @value="first">First</select.Option>
    <select.Option @value="second">Second</select.Option>
    <select.Option @value="third">Third</select.Option>
  </VelvetSelect>
</DemoSpaceX>

Selected

<VelvetSelect @selected="second" as |select|>
  <select.Option @value="first">First</select.Option>
  <select.Option @value="second">Second</select.Option>
  <select.Option @value="third">Third</select.Option>
</VelvetSelect>

Pill

<VelvetSelect @isPill={{true}} as |select|>
  <select.Option @value="first">First</select.Option>
  <select.Option @value="second">Second</select.Option>
  <select.Option @value="third">Third</select.Option>
</VelvetSelect>

Disabled

<VelvetSelect @isDisabled={{true}} as |select|>
  <select.Option @value="first">First</select.Option>
  <select.Option @value="second">Second</select.Option>
  <select.Option @value="third">Third</select.Option>
</VelvetSelect>

Invalid

<VelvetSelect @isInvalid={{true}} as |select|>
  <select.Option @value="first">First</select.Option>
  <select.Option @value="second">Second</select.Option>
  <select.Option @value="third">Third</select.Option>
</VelvetSelect>

Examples

Handle Change Events

Edit this demo

Use the @onChange argument to handle change events.

Selected:

<DemoSpaceY>
  <div>Selected: {{this.selected}}</div>
  <VelvetSelect
    @onChange={{this.onChange}}
    @placeholder="Select an Option"
    @selected={{this.selected}}
    as |select|
  >
    <select.Option @value="first">First</select.Option>
    <select.Option @value="second">Second</select.Option>
    <select.Option @value="third">Third</select.Option>
  </VelvetSelect>
</DemoSpaceY>

Arguments

Name	Description	Type	Default Value
`@isDisabled`	Indicate if the select is disabled.	`boolean`	`false`
`@isInvalid`	Indicate if the select is invalid.	`boolean`	`false`
`@isPill`	Indicate if the select is pill shaped.	`boolean`	`false`
`@onChange`	Handle the select's `change` event.	`(selected: unknown, event: Event) => void`	`undefined`
`@placeholder`	The placeholder of the select.	`string`	`""`
`@selected`	The selected option of the select.	`unknown`	`undefined`
`@size`	The size of the select.	`"sm" \| "md" \| "lg"`	`"md"`
`@variant`	The appearance of the select.	`string \| "primary"`	`"primary"`

Option Arguments

Name	Description	Type	Default Value
`@value`	The value of the option.	`unknown`	`undefined`

Testing

Use the velvetSelect test helper to select a specific value for a VelvetSelect component.

import { velvetSelect } from "velvet-thunder/test-support";

// Select by index:
await velvetSelect(".velvet-select", { index: 0 });

// Select by text:
await velvetSelect(".velvet-select", { text: "First" });