Input

Usage
Generic input component.

Note

In order to use the sc-input element in your normal form element for correct form values and validations, this component does not use shadow dom, meaning the styles can be affected by the global css stylesheets.

Utilises the browser's built-in validations

This component passes the type attribute to the native <input> element used under the hood. So you can use types such as email, number, tel, url password for their supported browser validation behaviours.

Alternative components for certain types

There are input types that has dedicated components for them. Here's a list of input types and the component we recommend you use.

  • Buttons: sc-button
  • Color: sc-color
  • File: coming soon
  • Range: coming soon

Basic text input

<sc-input label="Text input" type="text"></sc-input>

You can set engraved level for individual inputs

<sc-input engraved="1" label="Engraved 1" type="text"></sc-input>
<sc-input engraved="3" label="Engraved 3" type="text"></sc-input>
<sc-input engraved="5" label="Engraved 5" type="text"></sc-input>

Add the block attribute to make it take the full width

<sc-input block label="Block input" type="text"></sc-input>

Radio buttons

<sc-input label="One" type="radio" name="test" value="1">
</sc-input>
<sc-input label="Two" type="radio" name="test" value="2"></sc-input>
<sc-input label="Three" type="radio" name="test" value="3" disabled></sc-input>
<sc-input label="Four" type="radio" name="test" value="4"></sc-input>

Other input types (browser god please help)

<div class="mb-5">
  date
  <sc-input type="date">
  </sc-input>
</div>
<div class="mb-5">
  datetime
  <sc-input type="datetime-local">
  </sc-input>
</div>
<div class="mb-5">
  email
  <sc-input type="email" >
  </sc-input>
</div>
<div class="mb-5">
  file
  <sc-input type="file">
  </sc-input>
</div>
<div class="mb-5">
  month
  <sc-input type="month">
  </sc-input>
</div>
<div class="mb-5">
  number
  <sc-input type="number">
  </sc-input>
</div>
<div class="mb-5">
  password
  <sc-input type="password">
  </sc-input>
</div>
<div class="mb-5">
  range
  <sc-input type="range">
  </sc-input>
</div>
<div class="mb-5">
  search
  <sc-input type="search">
  </sc-input>
</div>
<div class="mb-5">
  tel
  <sc-input type="tel">
  </sc-input>
</div>
<div class="mb-5">
  Time
  <sc-input type="time">
  </sc-input>

  Week
  <sc-input type="week">
  </sc-input>
</div>
Props
Name
Description
Type
Default
Nameaccept
Description

If the value of the type attribute is "file", then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.

Typestring
Default
NameariaLabelledby
Description

Aria labelby

Typestring
Default''
Nameautocapitalize
Description

Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.

Typestring
Default'off'
Nameautocomplete
Description

Indicates whether the value of the control can be automatically completed by the browser.

Type"off" | "on"
Default'off'
Nameautocorrect
Description

Whether auto correction should be enabled when the user is entering/editing the text value.

Type"off" | "on"
Default'off'
Nameautofocus
Description

This Boolean attribute lets you specify that a form control should have input focus when the page loads.

Typeboolean
Defaultfalse
Nameblock
Description

Takes the entire width of the row

Typeboolean
Defaultfalse
Namedisabled
Description

If true, the user cannot interact with the input.

Typeboolean
Defaultfalse
Nameengraved
Description

Engrave level (0-9) note if 0 there will be no visible border around the element, so you'll need to add border via css.

Typenumber
Default1
Nameinputmode
Description

A hint to the browser for which keyboard to display. Possible values: "none", "text", "tel", "url", "email", "numeric", "decimal", and "search".

Type"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"
Default
Namelabel
Description

Label for input

Typestring
Default
Namemax
Description

The maximum value, which must not be less than its minimum (min attribute) value.

Typestring
Default
Namemaxlength
Description

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters that the user can enter.

Typenumber
Default
Namemin
Description

The minimum value, which must not be greater than its maximum (max attribute) value.

Typestring
Default
Nameminlength
Description

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters that the user can enter.

Typenumber
Default
Namemultiple
Description

If true, the user can enter more than one value. This attribute applies when the type attribute is set to "email" or "file", otherwise it is ignored.

Typeboolean
Default
Namename
Description

The name of the control, which is submitted with the form data.

Typestring
Default''
Namepattern
Description

A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is "text", "search", "tel", "url", "email", or "password", otherwise it is ignored.

Typestring
Default
Nameplaceholder
Description

Instructional text that shows before the input has a value.

Typestring
Default
Namereadonly
Description

If true, the user cannot modify the value.

Typeboolean
Defaultfalse
Namerequired
Description

If true, the user must fill in a value before submitting a form.

Typeboolean
Defaultfalse
Namesize
Description

The initial size of the control. This value is in pixels unless the value of the type attribute is "text" or "password", in which case it is an integer number of characters. This attribute applies only when the type attribute is set to "text", "search", "tel", "url", "email", or "password", otherwise it is ignored.

Typenumber
Default
Namestep
Description

Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: "any" or a positive floating point number.

Typestring
Default
Nametype
Description

The type of control to display. The default type is text.

Typestring
Default'text'
Namevalue
Description

The value of the input.

Typestring
Default''
Events
Event
Description
Event detail
EventblurEvent
Description

Emitted when the input loses focus.

Event detailvoid
EventchangeEvent
Description

Emitted when the value has changed.

Event detailany
EventfocusEvent
Description

Emitted when the input has focus.

Event detailvoid
EventinputEvent
Description

Emitted when a keyboard input occurred.

Event detailKeyboardEvent
EventkeyDownEvent
Description

Emitted when a key is pressed down

Event detailvoid
Methods
Method
Description
Signature
MethodgetInputElement
Description

Returns the native <input> element used under the hood.

SignaturegetInputElement() => Promise<HTMLInputElement>
MethodsetFocus
Description

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

SignaturesetFocus() => Promise<void>

Comments

Leave your thoughts here and it becomes a GitHub issue! Thanks to the magic of Utterances