Input

Use Input for form inputs including text, password, email, url, and search.

Example

Type in the field to see the value change.

<script>
  import { Input } from '$lib/ui';
  let name = '';
</script>

<Input
  name="name"
  label="Name"
  placeholder="Jane Doe"
  bind:value={name}
/>

<p>Name: {name}</p>

Name:

Label

A label prop let’s you define a simple String to be used as the input label.

<Input label="Name" />

PlaceHolder

A placeholder prop let’s you define a simple String to be used as a simple descriptor for the input value.

<Input placeholder="Jane Doe" />

Disabled

Default is true but can also be assigned a Boolean value like disabled={user.isSpammable}.

<Input label="Name" disabled />

Error

Display error message below the field. Also adds error styles.

<Input label="Email" error="Email is not valid" />

Note

A note prop let’s you define a note displayed below the field.

<Input note="This is a note" />

Input Component Props

Input CSS Custom Properties