components input

components/input

Import: import { Input, FloatingInput, InputIcon, InputGroup } from "@tundralibs/ui/input"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Input

Input(props: InputProps): Html

FloatingInput

FloatingInput(props: FloatingInputProps): Html

InputIcon

InputIcon(props: InputIconProps): Html

An input with an inset icon (search, mail…). The glyph is decorative.

InputGroup

InputGroup(props: InputGroupProps): Html

Types

InputSize

• "sm"
• "md"
• "lg"

InputProps

Prop	Type	Required	Description
id	string
name	string
type	string
value	string
placeholder	string
size	InputSize
disabled	boolean
readonly	boolean
required	boolean
invalid	boolean
extraClass	string		Extra classes, e.g. input-group__control when nested in an InputGroup.
attrs	Attrs

FloatingInputProps

Extends InputProps.

Prop	Type	Required	Description
label	`string	Html`	yes

InputGroupProps

Prop	Type	Required	Description
start	`string	Html`
end	`string	Html`
control	Html	yes	The control itself — usually Input({ extraClass: "input-group__control", ... }).
attrs	Attrs

InputIconProps

Prop	Type	Required	Description
icon	Html	yes	The glyph — usually Icon("search", { size: 16 }).
end	boolean		Put the glyph after the control instead of before.
control	Html	yes	The control itself — a plain Input(...).
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

A required email field

Input({ id: "email", name: "email", type: "email", placeholder: "you@acme.com", required: true })

<input type="email" class="input" id="email" name="email" placeholder="you@acme.com" required="">

A search box with an icon

InputIcon({
  icon: Icon("search", { size: 16 }),
  control: Input({ type: "search", placeholder: "Search invoices" }),
})

<span class="input-icon">
  <span class="input-icon__glyph" aria-hidden="true">
    <svg width="16" height="16" width="2" …>…</svg>
  </span>
  <input type="search" class="input" placeholder="Search invoices">
</span>

An amount with a currency prefix

InputGroup({
  start: "$",
  control: Input({ name: "amount", extraClass: "input-group__control", placeholder: "0.00" }),
})

<div class="input-group">
  <span class="input-group__addon">$</span>
  <input type="text" class="input input-group__control" name="amount" placeholder="0.00">
</div>

A floating label

FloatingInput({ id: "company", name: "company", label: "Company" })

<div class="input-float">
  <input type="text" class="input" id="company" name="company" placeholder=" ">
  <label class="input-float__label" for="company">Company</label>
</div>

CSS hooks

Classes defined by components/input/input.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.combobox__field, .combobox__input, .combobox__list, .input, .input--invalid, .input--lg, .input--multiline, .input--sm, .input-float, .input-float__label, .input-group, .input-group__addon, .input-group__control, .input-icon, .input-icon--end, .input-icon__glyph, .select, .select__native