blue
View on GitHub

Select

A select dropdowns allow users to pick a single choice from a predefined list.

Usage

Light
Blue
Zoho Puvi 
<script>
	import { Select } from 'deskblocks';
</script>

<Select>
	<option value="option1">Option 1</option>
	<option value="option2">Option 2</option>
	<option value="option3">Option 3</option>
</Select>

Mandatory input

Light
Blue
Zoho Puvi 
<script>
	import { Select, FormLabel } from 'deskblocks';
</script>

<div>
	<FormLabel required for="inp">Label</FormLabel>
	<Select id="inp" required>
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
	</Select>
</div>

Select with icon

Pass the Icon component within the left or right slot to render it on the left or right side, respectively.

Light
Blue
Zoho Puvi 
<script>
	import { Select, Icon } from 'deskblocks';
	import { IconActivity } from 'deskblocks/icons';
</script>

<!-- Left Icon -->
<Select>
	<Icon slot="left" icon={IconActivity} />
	<option value="option1">Option 1</option>
	<option value="option2">Option 2</option>
	<option value="option3">Option 3</option>
</Select>

<!-- Right Icon -->
<Select>
	<Icon slot="right" icon={IconActivity} />
	<option value="option1">Option 1</option>
	<option value="option2">Option 2</option>
	<option value="option3">Option 3</option>
</Select>

Help message

Light
Blue
Zoho Puvi
Answer to the Ultimate Question of Life, the Universe, and Everything 
<script>
	import { Select, FormHelpMessage } from 'deskblocks';
</script>

<div>
	<Select>
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
	</Select>

	<FormHelpMessage>
		Answer to the Ultimate Question of Life, the Universe, and Everything
	</FormHelpMessage>
</div>

Invalid state

Light
Blue
Zoho Puvi
Answer to the Ultimate Question of Life, the Universe, and Everything 
<script>
	import { Select, FormErrorMessage } from 'deskblocks';
</script>

<div>
	<Select invalid>
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
	</Select>

	<FormErrorMessage>
		Answer to the Ultimate Question of Life, the Universe, and Everything
	</FormErrorMessage>
</div>

Disabled state

Light
Blue
Zoho Puvi 
<script>
	import { Select } from 'deskblocks';
</script>

<Select disabled>
	<option value="option1">Option 1</option>
	<option value="option2">Option 2</option>
	<option value="option3">Option 3</option>
</Select>

Props

value string | number undefined Specifies the current selected value of the select field.
placeholder string undefined Provides placeholder text that appears as the default option when no value is selected.
id string undefined Specifies a unique identifier for the select field.
disabled boolean false Disables the select field, preventing user interaction.
invalid boolean false Marks the select field as invalid, typically used for form validation.
required boolean false Indicates that selecting an option is required before form submission.
class string undefined Custom CSS class name for additional styling.

Slots

Events