Skip to main content

Input
Ready

Inputs are used to allow users to provide text input when the expected input is short. Input component has a range of options and supports several text formats including numbers.

You can use native HTML5 validation with Input component via validation properties. This allows you to specify rules like whether a value needs to be filled in, the minimum and maximum length of the data, whether it needs to be a number, and a pattern that it must match.

Examples

Open in new window
<duet-input type="text" required label="Text input" placeholder="Placeholder text" debounce="500"></duet-input>

<script>
// Select the above input component
var input = document.querySelector("duet-input")

// Listen for change events. Use debounce prop to adjust the time to trigger this.
input.addEventListener("duetChange", function(e) {
console.log("Change detected in input:", e.detail)
})
</script>
Open in new window
<duet-input
type="text"
required
label="Text input"
placeholder="Placeholder text"
debounce="500"
expand>

</duet-input>
Open in new window
<duet-input type="text" required label="Text input" placeholder="Placeholder text"></duet-input>

<script>
// Select the above input component
var input = document.querySelector("duet-input")

// Listen for change events and replace characters we don’t want to allow
input.addEventListener("duetChange", function(e) {
input.value = e.target.value.replace(/[^0-9,]+/g, "");
})
</script>
Open in new window
<duet-input type="tel" required label="Tel input" placeholder="Placeholder text"></duet-input>
Open in new window
<duet-input type="search" label="Search input" label-hidden placeholder="Type to search"></duet-input>
Open in new window
<duet-input type="password" label="Password" placeholder="Password"></duet-input>
Open in new window
<duet-input disabled label="Disabled input" value="Input value"></duet-input>
Open in new window
<duet-input disabled label="Disabled input" value="Input value" icon="form-location"></duet-input>
Open in new window
<duet-input error="There’s an error!" label="Error input" value="Input value"></duet-input>
Open in new window
<duet-input
tooltip="Hello, I’m a tooltip! To close me you can hit ESC key,
click the close button, or click outside of the tooltip."

placeholder="This input has a tooltip"
label="Tooltip usage with input">

</duet-input>

Properties #

Property Attribute Description Type Default
accessibleActiveDescendant accessible-active-descendant Indicates the id of a related component’s visually focused element. string undefined
accessibleAutocomplete accessible-autocomplete Indicates what kind of user input completion suggestions are provided. string undefined
accessibleControls accessible-controls Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. string undefined
accessibleOwns accessible-owns Indicates the id of a component owned by the input. string undefined
autoComplete auto-complete Enable or disable automatic completion by the browser string "on"
debounce debounce Set the amount of time, in milliseconds, to wait to trigger the duetChange event after each keystroke. number 0
disabled disabled Makes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. boolean false
error error Display the input in error state along with an error message. string ""
expand expand Expands the input to fill 100% of the container width. boolean false
icon icon Icon to display on the right side (from Duet’s icons). Example: "form-location" string undefined
identifier identifier Adds a unique identifier for the input. string undefined
label label Label for the input. string "label"
labelHidden label-hidden Visually hide the label, but still show it to screen readers. boolean false
margin margin Controls the margin of the component. "auto" | "none" "auto"
maxlength maxlength Use maxlength to specify the maximum length of the value that can be entered. Please note that this uses native HTML5 pattern validation. number undefined
minlength minlength Use minlength to specify the minimum length of the value that can be entered. Please note that this uses native HTML5 pattern validation. number undefined
name name Name of the input. string undefined
numericKeyboard numeric-keyboard Enable numeric keyboard for the input. boolean false
pattern pattern A regular expression to check the value against. Please note that this uses native HTML5 pattern validation. string undefined
placeholder placeholder Hint text to display. string undefined
required required Set whether the input is required or not. boolean false
role role Defines a specific role attribute for the input. string undefined
theme theme Theme of the input. "" | "default" | "turva" ""
tooltip tooltip Tooltip to display next to the label of the input. string ""
type type Type of the input. "email" | "password" | "search" | "tel" | "text" "text"
value value Value of the input. string undefined

Events #

Event Description Type
duetBlur Emitted when the input loses focus. CustomEvent<{ originalEvent?: Event; value: string; component: "duet-input"; }>
duetChange Emitted when the value has changed. CustomEvent<{ originalEvent?: Event; value: string; component: "duet-input"; }>
duetFocus Emitted when the input has focus. CustomEvent<{ originalEvent?: Event; value: string; component: "duet-input"; }>
duetInput Emitted when a keyboard input ocurred. CustomEvent<{ originalEvent?: Event; value: string; component: "duet-input"; }>

Methods #

setFocus() => Promise<void> #

Sets focus on the specified duet-input. Use this method instead of the global
input.focus().

Returns #

Type: Promise<void>

Dependencies #

Used by #

Depends on #

Graph #

graph TD;
duet-input --> duet-label
duet-input --> duet-tooltip
duet-input --> duet-icon
duet-tooltip --> duet-visually-hidden
duet-number-input --> duet-input
style duet-input fill:#f9f,stroke:#333,stroke-width:4px

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.



Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown


Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.