Web Components inspired by the Gtk's Adwaita theme.
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.
<adw-input placeholder="Put in your name"></adw-input>| 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. |
<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>| 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" |
| Property | Description | Default |
|---|---|---|
selected |
If the option is selected or not. | "false" |
value |
The value of the option. |
<adw-slider min="0" max="100" value="50"></adw-slider>| 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. |
<adw-switch active="true"></adw-switch>| 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" |
<adw-calendar value="2025-10-04"></adw-calendar>| 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 |