Select

Playground

Option 1Option 212ABC

Disabled Multiple

Field status:

No status

Success

Danger

Warning

Field size:

Default size

Small

Large

Add option:

Current value:

Option 1

Rendered class:

Basic example

<t-select
  v-model="model"
  name="my-input"
  :options="[
    { value: 1, text: 'Option 1' },
    { value: 2, text: 'Option 2' }
  ]"
/>

Props

Property	Type	Default value	Accepted values
id	String	null	Any valid type
autofocus	Boolean	false	Any valid type
disabled	Boolean	false	Any valid type
name	String	null	Any valid type
readonly	Boolean	undefined	Any valid type
required	Boolean	false	Any valid type
tabindex	String / Number	null	Any valid type
multiple	Boolean	false	Any valid type
options	Array / Object	[]	Any valid type
valueAttribute	String	undefined	Any valid type
textAttribute	String	undefined	Any valid type
status	String / Boolean	null	true, false, 'success', 'error', 'warning'
size	String	null	'sm', 'lg'
placeholder	String	undefined	Any valid type

Classes related props

Property	Description
baseClass	Base select box class (never changes)
baseClassMultiple	Base select box class when is multiple (never changes)
defaultStatusClass	Classes when select box doesnt has status and is not disabled
errorStatusClass	Classes when select box has status of false or "error"
successStatusClass	Classes when select box has status of true or "success"
warningStatusClass	Classes when select has status of "warning"
disabledClass	Classes when the select box is disabled
defaultSizeClass	Classes when the select box has no defined size
largeSizeClass	Classes when the select box has the size defined as large (lg)
smallSizeClass	Classes when the select box has the size defined as small (sm)
wrapperClass	Classes for the select box wrapper
arrowWrapperClass	Classes for the select box arrow wrapper
arrowClass	Classes for the select box arrow

Options format

The component accepts the options in different formats:

Array of objects

<!-- Value, text attributes (preferred default) -->
<t-select :options="[{ value: 1, text: 'Option 1' }, { value: 2, text: 'Option 2' }]" />
<!-- id instead of value as attribute -->
<t-select :options="[{ id: 1, text: 'Option 1' }, { id: 2, text: 'Option 2' }]" />
<!-- label instead of text as attribute -->
<t-select :options="[{ value: 1, label: 'Option 1' }, { value: 2, label: 'Option 2' }]" />

<!-- All the examples above will render: -->
<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Object with value:text pairs

<t-select :options="{ A: 'Option A', B: 'Option B', C: 'Option C' }" />

<!-- Will Render: -->
<select>
  <option value="A">Option A</option>
  <option value="B">Option B</option>
  <option value="C">Option C</option>
</select>

Array of strings

<t-select :options="['Red', 'Blue', 'Yellow']" />

<!-- Will Render: -->
<select>
  <option value="Red">Red</option>
  <option value="Blue">Blue</option>
  <option value="Yellow">Yellow</option>
</select>

Array of numbers

<t-select :options="[18, 19, 20]" />

<!-- Will Render: -->
<select>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
</select>

Define the value/text attributes

<t-select
  :options="[
    { key: 'A', description: 'One option' },
    { key: 'B', description: 'Another option' },
    { key: 'C', description: 'One more' },
  ]"
  value-attribute="key"
  text-attribute="description"
/>

<!-- Will Render: -->
<select>
  <option value="A">One option</option>
  <option value="B">Another option</option>
  <option value="C">One more</option>
</select>

Events

Event	Arguments	Description
input	String (The current value of the select)	Emitted every time the value of the v-model change
change	String (The current value of the select)	Emitted when the select is blurred and the value was changed since it was focused
focus	FocusEvent	Emitted when the select is focused
blur	FocusEvent	Emitted when the select is blurred

Default theme settings

const TSelect = {
  baseClass: 'block appearance-none w-full border pr-8 rounded leading-tight',
  baseClassMultiple: 'block appearance-none w-full border rounded leading-tight',
  defaultStatusClass: 'bg-white',
  errorStatusClass: 'border-red-300 bg-red-100',
  successStatusClass: 'border-green-300 bg-green-100',
  warningStatusClass: 'border-yellow-400 bg-yellow-100',
  disabledClass: 'bg-gray-100 cursor-not-allowed opacity-75',
  defaultSizeClass: 'p-3',
  largeSizeClass: 'p-4 text-lg',
  smallSizeClass: 'p-2 text-sm',
  wrapperClass: 'relative',
  arrowWrapperClass: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700',
  arrowClass: 'fill-current h-4 w-4',
}

export default TSelect

• Remember that in order to change the default settings you can change default theme or use the props:

<t-select
  :options="['Yellow', 'Blue', 'Red']"
  value="Blue"
  base-class="block appearance-none w-full border-2 border-blue-300 pr-8 rounded-lg leading-tight bg-blue-100"
/>

The result:

YellowBlueRed