The input displays with a border by default. The display reacts to the values of the css variables that can be adjusted with the settings panel.
Setting the type property will set the type of the input in the shadow dom. It supports a specific subset of input types.
On some browsers this will display an additional calendar icon which gets a light background.
On some browsers this will display an additional calendar icon which gets a light background.
The password type will cause a 'show' / 'hide' password toggle widget to display
The style of the search box is being affected by the main style.css file
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
On some browsers this will display an additional clock icon which gets a light background.
(defaults to text)
Inspecting the element will how the input in the shadow dom has the 'name' property set.
The value of the blox-input displays and propagates to the input in the shadow dom.
Similarly, the placeholder will propagate to the input in the shadow dom.
When the default-value property is set, a reset button will display.
Read-only inputs look like other inputs and can be focused.
The value cannot be changed either with js or user input.
Disabled inputs appear different than other elements and cannot be focused.
The value cannot be changed either with js or user input. It is immutable.
The border radius of the different sized inputs reacts to the css variables.
The label is on top by default
The position of the label can be customized using the available parts
The size of the label reacts to the size property.
Displays as the opposite color theme.
Slotted elements will display green
Corners can be customized per-element by defining the variable to a specific scope.