Input

Displays a form input field or a component to look like an input field.

Component Source

View the source code for the input component.

$lib/components/ui/input/input.svelte

Installation

npx nnuikit add input-inputgroup

import Input from "$lib/components/ui/input/input.svelte";
import * as InputGroup from "$lib/components/ui/input-group";

Quick Start

<Input type="email" placeholder="example@gmail.com" />

Input Playground

Try types, disabled, and invalid states.

<Input placeholder="Enter text..." />

Type

States

Disabled

Invalid

Warning

Placeholder

Input Group

Combine inputs with addons, buttons, and text.

<InputGroup.Root>
  <InputGroup.Input placeholder="Username" />
  <InputGroup.Addon align="inline-start">
    <InputGroup.Text>$</InputGroup.Text>
  </InputGroup.Addon>
  <InputGroup.Addon align="inline-end">
    <InputGroup.Button size="xs">Search</InputGroup.Button>
  </InputGroup.Addon>
</InputGroup.Root>

Addon Alignment

Addons

Text Addon

Button

Compositions

Examples combining inputs with addons in various alignments.

Username (inline-start)

<InputGroup.Root>
  <InputGroup.Addon align="inline-start">
    <InputGroup.Text>@</InputGroup.Text>
  </InputGroup.Addon>
  <InputGroup.Input placeholder="username" />
</InputGroup.Root>

Domain (inline-end)

.com

<InputGroup.Root>
  <InputGroup.Input placeholder="yoursite" />
  <InputGroup.Addon align="inline-end">
    <InputGroup.Text>.com</InputGroup.Text>
  </InputGroup.Addon>
</InputGroup.Root>

Search with button

<InputGroup.Root>
  <InputGroup.Input placeholder="Search..." />
  <InputGroup.Addon align="inline-end">
    <InputGroup.Button size="xs">
      <svg>...</svg>
    </InputGroup.Button>
  </InputGroup.Addon>
</InputGroup.Root>

Block start label

Email address

<InputGroup.Root>
  <InputGroup.Addon align="block-start">
    <InputGroup.Text>Email address</InputGroup.Text>
  </InputGroup.Addon>
  <InputGroup.Input type="email" placeholder="you@example.com" />
</InputGroup.Root>

Props

Input

Prop	Type	Default	Description
`type`	`string`	"text"	HTML input type
`disabled`	`boolean`	false	Disables input
`aria-invalid`	`boolean`	false	Marks as invalid

InputGroup.Addon

Prop	Type	Default	Description
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	"inline-start"	Addon position

InputGroup.Button

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "icon-xs" \| "icon-sm"`	"xs"	Button size within the input group