Text Input

Text inputs are used to collect text from the user. They are commonly used in forms and settings pages.

Props

Name
Default
Description
state
default
The state of the text input. This will change the border color of the text input. States can be one of:
  • default
  • success
  • warning
  • error
size
medium
The size of the text input. Sizes can be one of:
  • x-small(height: 20px)
  • small(height: 26px)
  • medium(height: 30px)
  • large(height: 36px)
block
false
If true, the text input will take the full width of its parent.
value
undefined
The value of the text input. This is a bindable property.
input
A reference to the native <input> element (bindable).

Examples

Basic

<TextInput placeholder="Basic text input" bind:value={myValue} />
The value is "{myValue}"
The value is ""

Sizes

<TextInput placeholder="X-Small" size="x-small" />
<TextInput placeholder="Small" size="small" />
<TextInput placeholder="Medium (default)" />
<TextInput placeholder="Large" size="large" />

States

<TextInput 
    placeholder="This is a default text input" 
    state="default" 
    block 
/>
<TextInput 
    placeholder="This is a success text input" 
    state="success" 
    block 
/>
<TextInput 
    placeholder="This is a warning text input" 
    state="warning"
    block
/>
<TextInput 
    placeholder="This is an error text input" 
    state="error"
    block 
/>

with Starting Slot

<TextInput placeholder="Search">
    <IconSearch slot="start" />
</TextInput>

with Ending Slot

<TextInput placeholder="Delay" type="number">
    <span slot="end">minutes</span>
</TextInput>

The ending slot is useful with the Loader component to indicate a loading state, for example in a search input.