Select Component

The Select Component closely follows Material Design specifications and has two different styles - default and outlined.

Properties

  • id - Required. A unique name for the Select.
  • items - Required. An Array of Items to display in the select component. See below for examples.
  • title - Similar to a label Element, but functions in an inline way.
  • value - Like with a regular HTML select input, this is the current value of the select.
  • outlined - Whether the Select should use the outlined design variant. Defaults to false.
  • error - A short error to display under the element. An empty string will not count as an error.
  • help - Help text to display under the element. Will be overridden by error until the error is cleared.
  • disabled - Whether the input is disabled and cannot be focussed. Defaults to false.
  • filter - A boolean of whether to allow text input for filtering the dropdown results. Defaults to false.
  • visible - A maximum amount of items to display in the dropdown. Defaults to -1 (Unlimited).

Examples

const $select = window.casthub.create('select');
$select.id = 'hello-world-1';
$select.title = 'Hello world!';
$select.help = 'Just a simple Select';
$select.items = [
    {
        text: 'Test 1',
        value: 'test-1',
    },
    {
        text: 'Test 2',
        value: 'test-2',
    },
    {
        text: 'Test 3',
        value: 'test-3',
    },
];
const $select = window.casthub.create('select');
$select.id = 'hello-world-2';
$select.title = 'Hello world 2!';
$select.outlined = true;
$select.filter = true;
$select.visible = 2;
$select.items = [
    {
        text: 'Test 1',
        value: 'test-1',
    },
    {
        text: 'Test 2',
        value: 'test-2',
    },
    {
        text: 'Test 3',
        value: 'test-3',
    },
];