Setup

AdwaveUI requires the AdwaveCSS stylesheet to be present.

The css files needed can be found in this package path: adwavecss/dist/styles.css

The adwave web components need to be imported in the JavaScript files:

import "adwaveui";

alternatively each web comoponent can be importted individually:

import "adwaveui/dist/esm/components/input/input";
import "adwaveui/dist/esm/components/selector/selector";
import "adwaveui/dist/esm/components/slider/slider";
import "adwaveui/dist/esm/components/switch/switch";
import "adwaveui/dist/esm/components/calendar/calendar";

style files for each of these can also be found in their respective directories.

Components

1. Input
2. Selector
3. Slider
4. Switch
5. Calendar

Input

<adw-input placeholder="Put in your name"></adw-input>

Properties

| Property | Description | Default | | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | disabled | If the input is disabled or not. | "false" | | form | The form the input belongs to. | | | maxlength | The maximum length of the input. | | | minlength | The minimum length of the input. | | | name | The name of the input, used when submitting a form. | | | placeholder | Text displayed when the input is empty. | | | suggestions | List of suggested strings to display when the input is focused. | | | suggestionsorientation | Determines whether the list of suggestions appears above or below the input field. up or down. | "down" | | suggestionsshowall | Set to "true" to always display all the suggestions. | "false" | | fuzzy | When set to "true" the suggestions will be filtered using a fuzzy search algorithm. By default filtering is done using a simple string match. | | | type | The type of the input. (text, password, email, etc.) | "text" | | value | The current value of the input. | |

Selector

<adw-selector placeholder="Select option">
  <adw-option value="1" selected="true"> Option 1 </adw-option>
  <adw-option value="2"> Option 2 </adw-option>
  <adw-option value="3"> Option 3 </adw-option>
</adw-selector>

Properties

| Property | Description | Default | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | | disabled | If the selector is disabled or not. | "false" | | form | The form the selector belongs to. | | | name | The name of the selector, used when submitting a form. | | | orientation | Determines whether the list of options appears above or below the selector. up or down. | "down" | | reverseorder | When set to true, the options will be displayed in reverse order. | "false" | | placeholder | Text displayed when no option is selected. | | | inert | When set to true, this option will appear as non-selectable, this can be used to create separators or headers above or in between other options. | "false" |

adw-option properties

| Property | Description | Default | | ---------- | --------------------------------- | ------- | | selected | If the option is selected or not. | "false" | | value | The value of the option. | |

Slider

<adw-slider min="0" max="100" value="50"></adw-slider>

Properties

| Property | Description | Default | | ----------- | ------------------------------------------------------------------------- | ------- | | disabled | If the slider is disabled or not. | "false" | | form | The form the slider belongs to. | | | max | The maximum value on the slider. | 100 | | min | The minimum value on the slider. | 0 | | name | The name of the slider, used when submitting a form. | | | precision | The number of decimal places to round the value to. | 4 | | step | The amount to increment or decrement the value by when moving the slider. | 1 | | value | The current value of the slider. | |

Switch

<adw-switch active="true"></adw-switch>

Properties

| Property | Description | Default | | ---------- | ---------------------------------------------------- | ------- | | disabled | If the switch is disabled or not. | | | form | The form the switch belongs to. | | | name | The name of the switch, used when submitting a form. | | | active | If the switch is active or not. | "false" |

Calendar

<adw-calendar value="2025-10-04"></adw-calendar>

Properties

| Property | Description | Default | | -------- | ----------------------------------------------------------------- | ------------------ | | form | The form the date input belongs to. | | | name | The name of the date input, used when submitting a form. | | | locale | The locale that will be used to format the dates. | navigator.language | | value | The selected date. Must be in a format acceptable by Date.parse() | current date |