1.0.0 Dark Light System

Input

<lynk-input> | LynkInput
stable Since 1.0.0

Inputs collect data from the user.

<lynk-input></lynk-input>

Examples

Labels

Use the label attribute to give the input an accessible label. For labels that contain HTML, use the label slot instead. 

<lynk-input label="What is your name?"></lynk-input>

Help Text

Add descriptive help text to an input with the help-text attribute. For help texts that contain HTML, use the help-text slot instead. 

<lynk-input label="Nickname" help-text="What would you like people to call you?"></lynk-input>

Help Tip

Add descriptive help tooltip to an input’s label with the help-tip attribute. For help tips that contain HTML, use the help-tip slot instead. 

<lynk-input label="Nickname" help-tip="What would you like people to call you?"></lynk-input>

Required Indicator

Use the required attribute to visually indicate a required field.

<lynk-input label="Name" required></lynk-input>

Placeholders

Use the placeholder attribute to add a placeholder.

<lynk-input placeholder="Type something"></lynk-input>

Custom Validation States

Use the state attribute to manually add an error, warning, or success state.

<lynk-input value="Error" label="State" state="error" help-text="That dog aint gonna hunt!"></lynk-input>
<lynk-input value="Warning" label="State" state="warning" help-text="Proceed with caution..."></lynk-input>
<lynk-input value="Success" label="State" state="success" help-text="Noice!"></lynk-input>

Clearable

Add the clearable attribute to add a clear button when the input has content.

<lynk-input placeholder="Clearable" clearable></lynk-input>

Toggle Password

Add the password-toggle attribute to add a toggle button that will show the password when activated. 

<lynk-input type="password" placeholder="Password Toggle" password-toggle></lynk-input>

Filled Inputs

Add the filled attribute to draw a filled input.

<lynk-input placeholder="Type something" filled></lynk-input>

Pill

Use the pill attribute to give inputs rounded edges.



<lynk-input placeholder="Small" size="small" pill></lynk-input>
<br />
<lynk-input placeholder="Medium" size="medium" pill></lynk-input>
<br />
<lynk-input placeholder="Large" size="large" pill></lynk-input>

Input Types

The type attribute controls the type of input the browser renders.






<lynk-input type="email" placeholder="Email"></lynk-input>
<br />
<lynk-input type="number" placeholder="Number"></lynk-input>
<br />
<lynk-input type="password" placeholder="Password" clearable value="test"></lynk-input>
<br />
<lynk-input type="date" placeholder="Date" clearable></lynk-input>
<br />
<lynk-input type="time" placeholder="Time" clearable></lynk-input>
<br />
<lynk-input type="datetime-local" placeholder="Date-Time" clearable></lynk-input>

Disabled

Use the disabled attribute to disable an input.



<lynk-input placeholder="Disabled" size="small" disabled></lynk-input>
<br />
<lynk-input placeholder="Disabled" size="medium" disabled></lynk-input>
<br />
<lynk-input placeholder="Disabled" size="large" disabled></lynk-input>

Readonly

Use the readonly attribute to make an input non-editable.



<lynk-input value="Readonly" size="small" readonly></lynk-input>
<br />
<lynk-input value="Readonly" size="medium" readonly></lynk-input>
<br />
<lynk-input value="Readonly" size="large" readonly></lynk-input>

Restricted

Use the restricted attribute to replace the input with a plain text string.

<lynk-input label="Label" value="Restricted" restricted></lynk-input>

Sizes

Use the size attribute to change an input’s size.



<lynk-input placeholder="Small" size="small" label="Size"></lynk-input>
<br />
<lynk-input placeholder="Medium" size="medium" label="Size"></lynk-input>
<br />
<lynk-input placeholder="Large" size="large" label="Size"></lynk-input>

Prefix & Suffix Icons

Use the prefix and suffix slots to add icons.



<lynk-input placeholder="Small" size="small">
  <lynk-icon name="house" slot="prefix"></lynk-icon>
  <lynk-icon name="chat" slot="suffix"></lynk-icon>
</lynk-input>
<br />
<lynk-input placeholder="Medium" size="medium">
  <lynk-icon name="house" slot="prefix"></lynk-icon>
  <lynk-icon name="chat" slot="suffix"></lynk-icon>
</lynk-input>
<br />
<lynk-input placeholder="Large" size="large">
  <lynk-icon name="house" slot="prefix"></lynk-icon>
  <lynk-icon name="chat" slot="suffix"></lynk-icon>
</lynk-input>

Using the Action Slot for Custom Button Controls

Use the action slot to append a button next to the input. Alternatively, the prefix and suffix slots can be used to place an icon button inside the input container.

Go 
<lynk-input type="search" placeholder="Search" clearable>
  <lynk-icon slot="prefix" name="search" library="default"></lynk-icon>
  <lynk-button slot="action" color="primary">Go</lynk-button>
</lynk-input>

Customizing Label Position

Use CSS parts to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls. 


<lynk-input class="label-on-left" label="Name"></lynk-input><br />
<lynk-input class="label-on-left" label="Email" type="email"></lynk-input>

<style>
  .label-on-left::part(form-control) {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .label-on-left::part(form-control-label) {
    flex: 0 0 auto;
    width: 60px;
    text-align: right;
  }

  .label-on-left::part(form-control-input) {
    flex: 1 1 auto;
  }
</style>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler

To import this component using a bundler:

import '@uplynk/lynk-design/dist/components/input/input.js';

Slots

Name Description
action append a custom button to the input.
label The input’s label. Alternatively, you can use the label prop.
prefix Used to prepend an icon or similar element to the input.
suffix Used to append an icon or similar element to the input.
clear-icon An icon to use in lieu of the default clear icon.
show-password-icon An icon to use in lieu of the default show password icon.
hide-password-icon An icon to use in lieu of the default hide password icon.
help-text Help text that describes how to use the input. Alternatively, you can use the help-text prop.
help-tip Help tooltip next to the label that can be used in place of help-text to give additional information about how to use the input. Alternatively, you can use the help-tip prop.

Learn more about using slots.

Properties

Name Description Reflects Type Default
type The type of input. Works the same as a native <input> element, but only a subset of types are supported. Defaults to text. 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' 'text'
name The input’s name attribute. string ''
value The input’s value attribute. string ''
defaultValue Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. string ''
state The input’s validity state when using manual validation or set automatically to error or success when field uses Constraint Validation 'error' | 'warning' | 'success' | 'default' 'default'
size The input’s size. 'small' | 'medium' | 'large' 'medium'
filled Draws a filled input. boolean false
pill Draws a pill-style input with rounded edges. boolean false
label The input’s label. Alternatively, you can use the label slot. string ''
helpText
help-text 		The help text below the input. Alternatively, you can use the help-text slot. string ''
helpTip
help-tip 		The help tooltip appended to the label. Alternatively, you can use the help-tip slot. string ''
clearable Adds a clear button when the input is populated. boolean false
disabled Disables the input. boolean false
placeholder Placeholder text to show as a hint when the input is empty. string ''
readonly Makes the input readonly. boolean false
restricted Replaces the input with a plain text string. boolean false
passwordToggle
password-toggle 		Adds a button to toggle the password’s visibility. Only applies to password types. boolean false
passwordVisible
password-visible 		Determines whether or not the password is currently visible. Only applies to password input types. boolean false
noSpinButtons
no-spin-buttons 		Hides the browser’s built-in increment/decrement spin buttons for number inputs. boolean false
autoPicker
auto-picker 		Will automatically display a picker if available when input receives focus boolean false
form By default, form controls are associated with the nearest containing <form> element. This attribute allows you to place the form control outside of a form and associate it with the form that has this id. The form must be in the same document or shadow root for this to work. string ''
required Makes the input a required field. boolean false
pattern A regular expression pattern to validate input against. string -
minlength The minimum length of input that will be considered valid. number -
maxlength The maximum length of input that will be considered valid. number -
min The input’s minimum value. Only applies to date and number input types. number -
max The input’s maximum value. Only applies to date and number input types. number -
step Specifies the granularity that the value must adhere to, or the special value any which means no stepping is implied, allowing any numeric value. number | 'any' -
autocapitalize The input’s autocapitalize attribute. 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' -
autocorrect Indicates whether the browser’s autocorrect feature is on or off. 'off' | 'on' -
autocomplete Specifies what permission the browser has to provide assistance in filling out form field values. Refer to this page on MDN for available values. string 'off'
autofocus The input’s autofocus attribute. boolean -
enterkeyhint Used to customize the label or icon of the Enter key on virtual keyboards. 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' -
spellcheck Enables spell checking on the input. boolean true
inputmode Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices. 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' -
valueAsDate Gets or sets the current value as a Date object. Returns null if the value can’t be converted. This will use the native <input type="{{type}}"> implementation and may result in an error. - -
valueAsNumber Gets or sets the current value as a number. Returns NaN if the value can’t be converted. - -
validity Gets the validity state object - -
validationMessage Gets the validation message - -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
ev-blur EvBlur Emitted when the control loses focus. -
ev-change EvChange Emitted when an alteration to the control’s value is committed by the user. -
ev-clear EvClear Emitted when the clear button is activated. -
ev-enter EvEnter Emitted when the return key is pressed while the input has focus. -
ev-focus EvFocus Emitted when the control gains focus. -
ev-input EvInput Emitted when the control receives input. -
ev-invalid EvInvalid Emitted when the form control has been checked for validity and its constraints aren’t satisfied. -

Learn more about events.

Methods

Name Description Arguments
focus() Sets focus on the input. options: FocusOptions
blur() Removes focus from the input. -
select() Selects all the text in the input. -
setSelectionRange() Sets the start and end positions of the text selection (0-based). selectionStart: number, selectionEnd: number, selectionDirection: 'forward' | 'backward' | 'none'
setRangeText() Replaces a range of text with a new string. replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | 'preserve'
showPicker() Displays the browser picker for an input element (only works if the browser supports it for the input type). -
stepUp() Increments the value of a numeric input type by the value of the step attribute. -
stepDown() Decrements the value of a numeric input type by the value of the step attribute. -
checkValidity() Checks for validity but does not show a validation message. Returns true when valid and false when invalid. -
getForm() Gets the associated form, if one exists. -
reportValidity() Checks for validity and shows the browser’s validation message if the control is invalid. -
setCustomValidity() Sets a custom validation message. Pass an empty string to restore validity. message: string

Learn more about methods.

Parts

Name Description
form-control The form control that wraps the label, input, and help-text.
form-control-label The label’s wrapper.
form-control-input The input’s wrapper.
form-control-help-text The help text’s wrapper.
base The component’s internal wrapper.
input The input control.
prefix The input prefix container.
clear-button The clear button.
password-toggle-button The password toggle button.
suffix The input suffix container.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <lynk-icon>
  • <lynk-popup>
  • <lynk-stack>
  • <lynk-tooltip>