Skip to main content
LocalTapiola Turva

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" expand required label="Text input" placeholder="Placeholder text"></duet-input>

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

  // Listen for input events
  input.addEventListener("duetInput", function(e) {
    console.log("User input detected", e)
  })

  // 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)
  })
</script>
Open in new window
<duet-input type="tel" expand required label="Tel input" placeholder="Placeholder text"></duet-input>
Open in new window
<duet-input type="search" expand label="Search input" label-hidden placeholder="Type to search"></duet-input>
Open in new window
<duet-input type="password" expand label="Password" placeholder="Password"></duet-input>
Open in new window
<duet-input disabled expand label="Disabled input" value="Input value"></duet-input>
Open in new window
<duet-input disabled expand label="Disabled input" value="Input value" icon="form-location"></duet-input>
Open in new window
<duet-input error="There’s an error!" expand label="Error input" value="Input value"></duet-input>

Properties #

PropertyAttributeDescriptionTypeDefault
accessibleActiveDescendantaccessible-active-descendantIndicates the id of a related component’s visually focused element.stringundefined
accessibleAutocompleteaccessible-autocompleteIndicates what kind of user input completion suggestions are provided.stringundefined
accessibleControlsaccessible-controlsUse this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.stringundefined
accessibleOwnsaccessible-ownsIndicates the id of a component owned by the input.stringundefined
autoCompleteauto-completeEnable or disable automatic completion by the browserstring"on"
debouncedebounceSet the amount of time, in milliseconds, to wait to trigger the duetChange event after each keystroke.number0
disableddisabledMakes the input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies.booleanfalse
errorerrorDisplay the input in error state along with an error message.string""
expandexpandExpands the input to fill 100% of the container width.booleanfalse
iconiconIcon to display on the right side (from Duet’s icons). Example: "form-location"stringundefined
identifieridentifierAdds a unique identifier for the input.stringundefined
labellabelLabel for the input.string"label"
labelHiddenlabel-hiddenVisually hide the label, but still show it to screen readers.booleanfalse
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
maxlengthmaxlengthUse maxlength to specify the maximum length of the value that can be entered. Please note that this uses native HTML5 pattern validation.numberundefined
minlengthminlengthUse minlength to specify the minimum length of the value that can be entered. Please note that this uses native HTML5 pattern validation.numberundefined
namenameName of the input.stringundefined
patternpatternA regular expression to check the value against. Please note that this uses native HTML5 pattern validation.stringundefined
placeholderplaceholderHint text to display.stringundefined
requiredrequiredSet whether the input is required or not.booleanfalse
roleroleDefines a specific role attribute for the input.stringundefined
themethemeTheme of the input. Can be one of: "default", "turva".string""
tooltiptooltipTooltip to display next to the label of the input.string""
typetypeType of the input. Can be one of: "text", "email", "password", "search", "tel".string"text"
valuevalueValue of the input.stringundefined

Events #

EventDescriptionType
duetBlurEmitted when the input loses focus.CustomEvent<any>
duetChangeEmitted when the value has changed.CustomEvent<any>
duetFocusEmitted when the input has focus.CustomEvent<any>
duetInputEmitted when a keyboard input ocurred.CustomEvent<any>

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 #

Depends on #

Graph #

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

Integration

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