Select

Select lets users choose one option from an options menu.

<tw-select label="Shoe Size">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</tw-select>

<tw-select
  label="Shoe Size"
  value="1">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</tw-select>

<tw-select
  label="Shoe Size"
  required>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</tw-select>

<tw-select
  label="Shoe Size"
  expand>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</tw-select>

<tw-select
  label="Shoe Size"
  error="This field is incorrect.">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</tw-select>

<tw-select
  label="Shoe Size"
  disabled>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</tw-select>

Properties

Property	Attribute	Description	Type	Default
`expand`	`expand`	Controls whether the select expands to fill the width of its container.	`boolean`	`false`
`controlName`	`name`	The name of the form component.	`string \| undefined`	`undefined`
`value`	`value`	The control value.	`string \| undefined`	`undefined`
`label`	`label`	The label of the control.	`string \| undefined`	`undefined`
`required`	`required`	Makes the control required.	`boolean`	`false`
`disabled`	`disabled`	Makes the control disabled.	`boolean`	`false`
`error`	`error`	Error to be shown with the input. Styles the input as incorrect when present.	`string \| undefined`	`undefined`

Slots

Name	Description
Default	The default slot for holding the options.

Events

Name	Description
`input`
`change`

Twikit

Twikit

Select

Properties

Slots

Events