Input

Inputs collect data from the user.

Input

basic input field

<six-input></six-input>

<six-input dropdown-search></six-input>

Placeholders

Use the placeholder attribute to add a placeholder.

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

Clearable

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

<six-input placeholder="Clearable" size="small" clearable></six-input>
<br>
<six-input placeholder="Clearable" size="medium" clearable></six-input>
<br>
<six-input placeholder="Clearable" size="large" clearable></six-input>

Toggle Password

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

<six-input type="password" placeholder="Password Toggle" size="small" toggle-password></six-input>
<br>
<six-input type="password" placeholder="Password Toggle" size="medium" toggle-password></six-input>
<br>
<six-input type="password" placeholder="Password Toggle" size="large" toggle-password></six-input>

Numbers

By default when using type number it allows you to only use integers

<six-input type="number" placeholder="Integers..."></six-input>

However, you might want to be able to use decimal numbers, in this case simply define a pattern and a step:

<six-input type="number" placeholder="Decimal Numbers..." pattern="[0-9]+([\.,][0-9]+)?" step="0.1"></six-input>

Line

Use the line prop to render inputs line style.

<six-input line></six-input>

Pill

Use the pill prop to give inputs rounded edges.

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

Disabled

Use the disabled attribute to disable an input.

<six-input placeholder="Write here your first name" size="small" label="Name" help-text="Help text" disabled>
</six-input>
<br>
<six-input placeholder="Write here your first name" size="medium" label="Name" help-text="Help text" disabled>
</six-input>
<br>
<six-input placeholder="Write here your first name" size="large" label="Name" help-text="Help text" disabled>
</six-input>

Sizes

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

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

Prefix & Suffix Icons

Use the prefix and suffix slots to add icons.

<six-input placeholder="Small" size="small">
  <six-icon slot="prefix" size="xSmall">local_offer</six-icon>
  <six-icon slot="suffix" size="xSmall">settings</six-icon>
</six-input>
<br>
<six-input placeholder="Medium" size="medium">
  <six-icon slot="prefix" size="small">local_offer</six-icon>
  <six-icon slot="suffix" size="small">settings</six-icon>
</six-input>
<br>
<six-input placeholder="Large" size="large">
  <six-icon slot="prefix" size="medium">local_offer</six-icon>
  <six-icon slot="suffix" size="medium">settings</six-icon>
</six-input>

Labels

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

<six-input label="What is your name?"></six-input>
<six-input           ><div slot="label">What is <span style="color: red">your</span> name?</div></six-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.

<six-input label="Name" help-text="Help text"> </six-input>

Error Text

Add a descriptive error message to an input using either the error-text prop, or the equally named slot.

warning There are two caveats when using the error-text prop/slot:

Remember to set the invalid prop as well! If you only provide some content to the error-text prop/slot, it won't be shown unless the invalid prop is set to true
When using the prop, and you need to show more than one message, remember to also set the error-text-count prop to a value that is the same or bigger than the length of the list of messages you are using. Otherwise only one message will be shown at a time

The error-text prop accepts either a simple string message, or a list of messages.

<six-input label="Simple string message" error-text="This is a simple string message" invalid> </six-input>

<six-input id="multiple-error-text" label="List of string message" invalid></six-input>
<script type="module">
  const sixInput = document.getElementById('multiple-error-text');
  sixInput.errorText = ['Message 1', 'Message 2'];
  sixInput.errorTextCount = 3;
</script>

When using the error-text slot, it is recommended to use the six-error component to wrap the error message(s). This will provide the correct styling out of the box

<six-input invalid>
  <div slot="error-text">
    <six-error               >An error message
      <a href="https://github.com/six-group/six-webcomponents" target="_blank">with a link</a></six-error>
  </div>
</six-input>

Events Disclaimer

The events of our webcomponents should follow native web elements as much as possible.

This means input, change and blur should be fired the same as when using native elements: Input is fired on input, and change and blur are fired when leaving the input

six-input-input is emitted when the user enters data (not emitted on dynamic value changes)

six-input-change is emitted when the user presses enter or leaves the form after filling in data

six-input-blur is emitted when the user leaves the form

six-input-value-change is emitted whenever the value changes. This could be because the user enters data or because the value was dynamically changed

You can play with the following native and six-input elements to see that the event firing is the same

<div style="font-size: 1rem; font-weight: bold; padding-bottom: 1rem">Native Input Element</div>
<input type="text" id="native-input" name="type" >
<div style="padding-bottom: 0.5rem">
  <div style="padding-top: 1rem">Event Firing History:</div>
  <ul id="native-events-list"></ul>
</div>

<div style="font-size: 1rem; font-weight: bold; padding-bottom: 1rem">SIX Input Element</div>
<six-input label="Events" help-text="Check what event is fired when..." id="events-input" clearable></six-input>
<six-button style="padding-top: 0.5rem" id="event-setting-btn">Set Value</six-button>
<div style="padding-bottom: 0.5rem">
  <div style="padding-top: 1rem">Event Firing History:</div>
  <ul id="events-list"></ul>
</div>
<div style="padding-bottom: 0.5rem">
  <div style="padding-top: 1rem">Event Firing History for six-input-value-change:</div>
  <ul id="events-list-value-change"></ul>
</div>

<script type="module">
  const nativeInput = document.getElementById('native-input');
  const inputEl = document.getElementById('events-input');
  const eventList = document.getElementById('events-list');
  const eventListValueChange = document.getElementById('events-list-value-change');
  const nativeEventList = document.getElementById('native-events-list');
  const eventSettingBtn = document.getElementById('event-setting-btn');

  const logEvent = (eventName, el, color) => (event) => {
    const value = event.target.value;
    el.innerHTML = `${el.innerHTML}<li><span style="font-weight: bold; color: ${color};">${eventName}:</span> ${value}</li>`;
  };
  inputEl.addEventListener('six-input-input', logEvent('input', eventList, 'blue'));
  inputEl.addEventListener('six-input-change', logEvent('change', eventList, 'red'));
  inputEl.addEventListener('six-input-blur', logEvent('blur', eventList, 'green'));
  inputEl.addEventListener('six-input-value-change', logEvent('value-change', eventListValueChange));

  nativeInput.addEventListener('input', logEvent('input', nativeEventList, 'blue'));
  nativeInput.addEventListener('change', logEvent('change', nativeEventList, 'red'));
  nativeInput.addEventListener('blur', logEvent('blur', nativeEventList, 'green'));

  eventSettingBtn.addEventListener('click', () => {
    const someString = 'dynamically set value';
    inputEl.value = someString;
    nativeInput.value = someString;
  });
</script>

Properties

Property	Attribute	Description	Type	Default
`autocapitalize`	`autocapitalize`	The input's autocaptialize attribute.	`string`	`'off'`
`autocomplete`	`autocomplete`	The input's autocomplete attribute.	`string`	`'off'`
`autocorrect`	`autocorrect`	The input's autocorrect attribute.	`"off" \| "on"`	`'off'`
`autofocus`	`autofocus`	The input's autofocus attribute.	`boolean`	`false`
`clearable`	`clearable`	Set to true to add a clear button when the input is populated.	`boolean`	`false`
`disabled`	`disabled`	Set to true to disable the input.	`boolean`	`false`
`dropdownSearch`	`dropdown-search`	Internal: Styles the input for the dropdown filter search.	`boolean`	`false`
`errorText`	`error-text`	The error message shown, if `invalid` is set to true.	`string \| string[]`	`''`
`errorTextCount`	`error-text-count`	The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1	`number \| undefined`	`undefined`
`helpText`	`help-text`	The input's help text. Alternatively, you can use the help-text slot.	`string`	`''`
`inputmode`	`inputmode`	The input's inputmode attribute.	`"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined`	`undefined`
`invalid`	`invalid`	If this property is set to true and an error message is provided by `errorText`, the error message is displayed.	`boolean`	`false`
`label`	`label`	The label text.	`string`	`''`
`line`	`line`	Set to render as line	`boolean`	`false`
`max`	`max`	The input's maximum value.	`number \| undefined`	`undefined`
`maxlength`	`maxlength`	The maximum length of input that will be considered valid.	`number \| undefined`	`undefined`
`min`	`min`	The input's minimum value.	`number \| undefined`	`undefined`
`minlength`	`minlength`	The minimum length of input that will be considered valid.	`number \| undefined`	`undefined`
`name`	`name`	The input's name attribute.	`string`	`''`
`pattern`	`pattern`	A pattern to validate input against.	`string \| undefined`	`undefined`
`pill`	`pill`	Set to true to draw a pill-style input with rounded edges.	`boolean`	`false`
`placeholder`	`placeholder`	The input's placeholder text.	`string \| undefined`	`undefined`
`readonly`	`readonly`	Set to true to make the input readonly.	`boolean`	`false`
`required`	`required`	Set to true to show an asterisk beneath the label.	`boolean`	`false`
`size`	`size`	The input's size.	`"large" \| "medium" \| "small"`	`'medium'`
`spellcheck`	`spellcheck`	Enables spell checking on the input.	`boolean`	`false`
`step`	`step`	The input's step attribute.	`number \| undefined`	`undefined`
`togglePassword`	`toggle-password`	Set to true to add a password toggle button for password inputs.	`boolean`	`false`
`type`	`type`	The input's type.	`"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"`	`'text'`
`value`	`value`	The input's value attribute.	`string`	`''`

Events

Event	Description	Type
`six-input-blur`	Emitted when the control loses focus. Access the new value via event.target.value.	`CustomEvent<undefined>`
`six-input-change`	Emitted when the control's value changes. Access the new value via event.target.value.	`CustomEvent<undefined>`
`six-input-clear`	Emitted when the clear button is activated.	`CustomEvent<undefined>`
`six-input-focus`	Emitted when the control gains focus.	`CustomEvent<undefined>`
`six-input-input`	Emitted when the control receives input. Access the new value via event.target.value.	`CustomEvent<undefined>`

Methods

`getSelectionRange() => Promise<SelectionRange>`

Returns the start and end positions of the text selection

Returns

Type: Promise<SelectionRange>

`removeFocus() => Promise<void>`

Removes focus from the input.

Returns

Type: Promise<void>

`select() => Promise<void | undefined>`

Selects all the text in the input.

Returns

Type: Promise<void | undefined>

`setFocus(options?: FocusOptions) => Promise<void>`

Sets focus on the input.

Parameters

Name	Type	Description
`options`	`FocusOptions \| undefined`

Returns

Type: Promise<void>

`setRangeText(replacement: string, start: number, end: number, selectMode?: "select" | "start" | "end" | "preserve") => Promise<void>`

Replaces a range of text with a new string.

Parameters

Name	Type	Description
`replacement`	`string`
`start`	`number`
`end`	`number`
`selectMode`	`"select" \| "start" \| "end" \| "preserve"`

Returns

Type: Promise<void>

`setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: SelectionRangeDirection) => Promise<void | undefined>`

Sets the start and end positions of the text selection (0-based).

Parameters

Name	Type	Description
`selectionStart`	`number`
`selectionEnd`	`number`
`selectionDirection`	`"none" \| "forward" \| "backward"`

Returns

Type: Promise<void | undefined>

Slots

Slot	Description
`"clear-icon"`	An icon to use in lieu of the default clear icon.
`"error-text"`	Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.
`"help-text"`	Help text that describes how to use the input. Alternatively, you can use the help-text prop.
`"hide-password-icon"`	An icon to use in lieu of the default hide password icon.
`"label"`	The input's label. Alternatively, you can use the label prop.
`"prefix"`	Used to prepend an icon or similar element to the input.
`"show-password-icon"`	An icon to use in lieu of the default show password icon.
`"suffix"`	Used to append an icon or similar element to the input.

Shadow Parts

Part	Description
`"base"`	The component's base wrapper.
`"clear-button"`	The clear button.
`"error-text"`	The input error text.
`"form-control"`	The form control that wraps the label, input, error-text and help-text.
`"help-text"`	The input help text.
`"input"`	The input control.
`"label"`	The input label.
`"password-toggle-button"`	The password toggle button.
`"prefix"`	The input prefix container.
`"suffix"`	The input suffix container.

Dependencies

Used by

six-date
six-datepicker
six-dropdown
six-search-field
six-select
six-timepicker

Depends on

six-icon
six-error

Graph

graph TD;
  six-input --> six-icon
  six-input --> six-error
  six-date --> six-input
  six-datepicker --> six-input
  six-dropdown --> six-input
  six-search-field --> six-input
  six-select --> six-input
  six-timepicker --> six-input
  style six-input fill:#f9f,stroke:#333,stroke-width:4px

Loading

Files

six-input.md

Latest commit

History

six-input.md

File metadata and controls

Input

Input

Placeholders

Clearable

Toggle Password

Numbers

Line

Pill

Disabled

Sizes

Prefix & Suffix Icons

Labels

Help Text

Error Text

Events Disclaimer

Properties

Events

Methods

getSelectionRange() => Promise<SelectionRange>

Returns

removeFocus() => Promise<void>

Returns

select() => Promise<void | undefined>

Returns

setFocus(options?: FocusOptions) => Promise<void>

Parameters

Returns

setRangeText(replacement: string, start: number, end: number, selectMode?: "select" | "start" | "end" | "preserve") => Promise<void>

Parameters

Returns

setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: SelectionRangeDirection) => Promise<void | undefined>

Parameters

Returns

Slots

Shadow Parts

Dependencies

Used by

Depends on

Graph

`getSelectionRange() => Promise<SelectionRange>`

`removeFocus() => Promise<void>`

`select() => Promise<void | undefined>`

`setFocus(options?: FocusOptions) => Promise<void>`

`setRangeText(replacement: string, start: number, end: number, selectMode?: "select" | "start" | "end" | "preserve") => Promise<void>`

`setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: SelectionRangeDirection) => Promise<void | undefined>`