Skip to main content

​
Overview

InputText is a versatile text input component that supports labels, error messages, validation states, and various sizing options. It includes debounced input handling and can be stacked with other components.

​
Props

​
id
any
default:"Random string"
Unique identifier for the input element. If not provided, a random ID is generated.
​
label
string
default:"''"
Label text displayed above the input field.
​
placeholder
string
default:"''"
Placeholder text shown when the input is empty.
​
errorText
string
default:"''"
Error message displayed below the input. When present, the input displays an error state.
​
disabled
boolean
default:"false"
When true, the input is read-only and styled as disabled.
​
value
string | number
default:"''"
The input value. This prop is bindable using bind:value.
​
focusOnLoad
boolean
default:"false"
When true, the input automatically receives focus when mounted.
​
stackLeft
boolean
default:"false"
When true, styles the input for stacking with a component on its left side.
​
stackRight
boolean
default:"false"
When true, styles the input for stacking with a component on its right side.
​
widthClass
string
default:"''"
Custom width class for the input. If not provided, defaults to full width.
​
size
'xs' | 'sm' | 'md'
default:"'md'"
Size variant of the input:
  • xs: Height 26px
  • sm: Height 28px
  • md: Height 32px
​
oninput
(value: string) => void
Callback fired when the input value changes. Debounced by 750ms.
​
onfocus
(event: FocusEvent) => void
Callback fired when the input receives focus.
​
onblur
(event: FocusEvent) => void
Callback fired when the input loses focus.
​
onkeydown
(event: KeyboardEvent) => void
Callback fired when a key is pressed while the input is focused.

​
Usage

​
Basic Input

<script>
  import { InputText } from 'popui'
  
  let value = $state('')
</script>

<InputText 
  bind:value 
  label="Username" 
  placeholder="Enter your username" 
/>

​
With Error State

<script>
  import { InputText } from 'popui'
  
  let email = $state('')
  let error = $state('')
  
  function validateEmail(value: string) {
    if (!value.includes('@')) {
      error = 'Please enter a valid email address'
    } else {
      error = ''
    }
  }
</script>

<InputText 
  bind:value={email}
  label="Email Address"
  placeholder="[email protected]"
  errorText={error}
  oninput={validateEmail}
/>

​
Different Sizes

<InputText size="xs" placeholder="Extra small" />
<InputText size="sm" placeholder="Small" />
<InputText size="md" placeholder="Medium" />

​
Stacked with Other Components

<div class="flex">
  <InputText 
    bind:value 
    placeholder="Search" 
    stackLeft 
  />
  <Button stackRight>Search</Button>
</div>

​
Auto-focus on Load

<InputText 
  bind:value 
  label="First Name"
  focusOnLoad 
/>

​
With Event Handlers

<script>
  let value = $state('')
  
  function handleKeyDown(event: KeyboardEvent) {
    if (event.key === 'Enter') {
      console.log('Submitted:', value)
    }
  }
</script>

<InputText 
  bind:value
  label="Quick Search"
  onkeydown={handleKeyDown}
  oninput={(val) => console.log('Input changed:', val)}
/>

​
Features

  • Debounced Input: The oninput callback is automatically debounced by 750ms to reduce excessive function calls
  • Error Validation: Built-in error state styling with error message display
  • Accessibility: Properly linked labels using the for attribute
  • Flexible Sizing: Three size variants to fit different UI contexts
  • Stackable Design: Can be combined with other components using stackLeft and stackRight props

Build docs developers (and LLMs) love

Get started for freeTalk to us