Input

A component to represent a stylized <input> element. Allows the user to type in arbitrary content.

Component render

<Input label="Label" onChange={(value) => console.log(value)} />

Properties

Property	Type	Description
autocomplete	string boolean	Whether or not this input should allow autocompletion by the browser Accepts a boolean, or “true”, “false”, “on”, “off” or an accepted string value for the autocomplete attribute.
autofocus	boolean	A boolean representing whether the input should focus on page load. If multiple elements with autofocus are present, it is not guaranteed which one will ultimately receive the focus. It is advised that only one at most is present.
autovalidate	boolean	Whether or not to automatically style this input as invalid based on native input validation attributes: min, max, pattern, required, maxlength, minlength. See MDN articles on form validation and constraint validation.
disabled	boolean	A boolean representing whether the input is disabled or not. This visually and functionally will disable the input.
inputld	string	A string specifying an ID for the input.
inputmode	string	Allows a browser to display an appropriate virtual keyboard. Accepted values.
invalid	boolean	A boolean representing whether the input is invalid or not. This represents error states.
label	string	The label for the input, which will appear right above the input text.
max	string	Specifies the maximum value for number and time inputs. See MDN on the max attribute.
maxlength	number	A number specifying the maximum length of characters for the input value. See MDN on the maxlength attribute.
min	string	Specifies the minimum value for number and time inputs. See MDN on the min attribute.
minlength	number	A number specifying the minimum length of characters for the input value. See MDN on the minlength attribute.
name	string	A string specifying a name for the input.
onChange	(value: string) = void The current value of the input	As the value of the input changes, this function will send back the value of the input.
placeholder	string	A string specifying the placeholder of the input. This is shown before a user attempts to add a value, given no value is already provided.
readonly	boolean	A boolean representing whether the input is readonly or not.
required	boolean	Whether or not the input is required; used to validate the input’s value. See MDN on the required attribute.
step	string	Specifies the increment step for number and time inputs. See MDN on the step attribute.
type	string	A string specifying the type of control to render. Any native HTML input type would work here.
value	string	A string specifying a value for the input. This will be visually shown on the input and can be edited by the user.

Slots

Slot	Description
leading-accessory	A slotted Accessory component that can be added as a leading accessory to the input. The common use case is to add an accessorized Icon component.
trailing-accessory	A slotted Accessory component that can be added as a trailing accessory to the input. The common use case is to add an accessorized Icon component.