domProperties.md

DOM properties

Back to documentation index

List of all properties

<select> has several properties which can be used in the same way in selectic.

• className (instead of class in order to be applied on main element and on the list element)
• disabled
• id
• multiple
• placeholder
• title
• value

Not supported attributes

className

Type: string

Default: ''

The given string will be applied as class to the main element and also to the list element. It can be used instead of class for when it is not possible to use the reserved keyword. Note that it will be applied to the inner list element too.

<selectic
    :options="['item1', 'item2']"
    value="item2"
    className="my-custom-class another-class"
/>

disabled

Type: boolean

Default: false

When disabled is set, selectic cannot be open nor changed.

<selectic
    :options="['item1', 'item2']"
    disabled
/>

id

Type: string

Default: ''

It defines a unique identifier (ID) which must be unique in the whole document. It is applied on an <input> element which contains the current state.

<selectic
    :options="['item1', 'item2']"
    value="item2"
    id="example"
/>

document.getElementById('example').value; // 'item2'

multiple

Type: boolean

Default: false

If set then several options can be selected.

The value will be an array.

<selectic
    :options="['item1', 'item2', 'item3']"
    multiple
/>

placeholder

Type: string

Default: ''

placeholder is not really a DOM attribute as it doesn't exist on <select> element. But it behaves like placeholder on <input>.

It displays the given text if no option is selected.

<selectic
    :options="['item1', 'item2', 'item3']"
    placeholder="choose an item"
/>

title

Type: string

Default: ''

It is added to the main element, and it behaves like title attribute of any HTML element when mouse is over the selected area.

<selectic
    :options="['item1', 'item2', 'item3']"
    title="An information about this component"
/>

value

Type: optionId or optionId[]

Default: null or []

The selected value. This is the initial value, and it can be altered to change the current selection.

This is the id of the selected option or an array of id (if multiple is set).

<selectic
    :options="['item1', 'item2']"
    value="item2"
/>

Not supported attributes

These attributes are currently not supported:

• autocomplete
• autofocus
• form
• name
• required
• size
• readonly