Components

Input

A single-line text field for every common input type.

Usage

Basic

HTML

<bs:bsui-input placeholder="Project name" />

Types

The type decides the keyboard and the validation the browser applies.

HTML

<bs:bsui-stack direction="column" gap="3" align="stretch">
  <bs:bsui-input type="email" placeholder="ada@example.com" />
  <bs:bsui-input type="url" placeholder="https://acme.com" />
  <bs:bsui-input type="tel" placeholder="+49 30 123456" />
  <bs:bsui-input type="search" placeholder="Search components" />
</bs:bsui-stack>

Required

Required inputs carry the required and aria-required attributes.

Repository Required. Pick the repository the deploy runs from.

HTML

<bs:bsui-field>
  <bs:bsui-field-label text="Repository" />
  <bs:bsui-input name="repository" placeholder="acme/website" required="true" />
  <bs:bsui-field-description text="Required. Pick the repository the deploy runs from." />
</bs:bsui-field>

Prefilled and disabled

A default value, and the same value with editing turned off.

HTML

<bs:bsui-stack direction="column" gap="3" align="stretch">
  <bs:bsui-input defaultValue="acme-production" />
  <bs:bsui-input defaultValue="acme-production" disabled="true" />
</bs:bsui-stack>

Attributes

Attribute	Type	Default
`type`	`text` `email` `password` `url` `tel` `search`	`text`
`name`	`text`	—
`placeholder`	`text`	—
`disabled`	`toggle`	`false`
`required`	`toggle`	`false`
`defaultValue`	`text`	—
`nameAlt`	`text`	—
`onChange`	`text`	—
`value`	`text`	—