Input Component

The ds-input component provides styled text inputs with validation support.

Component Dependencies

ds-input uses the following components internally:

• ds-text - For rendering labels and error messages with i18n support

Basic Usage

<ds-input name="email" placeholder="Enter your email"></ds-input>

Input Types

Text

<ds-input type="text" name="username"></ds-input>

Email

<ds-input type="email" name="email" required></ds-input>

Password

<ds-input type="password" name="password"></ds-input>

Number

<ds-input type="number" name="age" min="0" max="120"></ds-input>

With Labels

<ds-input
  label="Email Address"
  type="email"
  name="email"
  required
></ds-input>

With Translation Text

<ds-input
  label-text="Email Address"
  placeholder-key="form.email.placeholder"
  name="email"
></ds-input>

Variants

Default

<ds-input variant="default" name="field"></ds-input>

Filled

<ds-input variant="filled" name="field"></ds-input>

Outlined

<ds-input variant="outlined" name="field"></ds-input>

Validation

<ds-input
  type="email"
  name="email"
  required
  error="Please enter a valid email"
></ds-input>

Attributes

Attribute	Type	Default	Description
type	string	'text'	Input type
name	string	-	Input name attribute
value	string	-	Current input value
placeholder	string	-	Placeholder text
placeholder-key	string	-	Translation key for placeholder
label	string	-	Label text
label-text	string	-	Translation text for label
disabled	boolean	false	Disable the input
readonly	boolean	false	Make input read-only
required	boolean	false	Mark as required
variant	string	'default'	Visual variant
error	string	-	Error message to display
error-text	string	-	Translation text for error

Events

Event	Description
input-change	Fired when the value changes
input-focus	Fired when the input gains focus
input-blur	Fired when the input loses focus

Methods

Method	Description
focus()	Focus the input
blur()	Remove focus
select()	Select all input text