Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Input

Displays a form input field or a component that looks like an input field.

Installation

The Input component is part of Slate UI Kit and is available by default.

Usage
example.blade.php 
<x-slate::input placeholder="Enter your email" />

Types

The Input component supports all standard HTML input types.

example.blade.php 
<x-slate::input type="text" placeholder="Text" />
<x-slate::input type="email" placeholder="Email" />
<x-slate::input type="password" placeholder="Password" />
<x-slate::input type="number" placeholder="Number" />
<x-slate::input type="tel" placeholder="Phone" />
<x-slate::input type="url" placeholder="URL" />

Sizes

Use the size prop to change the size of the input.

example.blade.php 
<x-slate::input size="sm" placeholder="Small" />
<x-slate::input size="default" placeholder="Default" />
<x-slate::input size="lg" placeholder="Large" />

With Label

Use the label prop to add a label to the input.

example.blade.php 
<x-slate::input label="Email" type="email" placeholder="Enter your email" />
<x-slate::input label="Password" type="password" placeholder="Enter your password" />

With Help Text

Use the help prop to add help text below the input.

We'll never share your email with anyone else.

example.blade.php 
<x-slate::input 
    label="Email" 
    type="email" 
    placeholder="Enter your email"
    help="We'll never share your email with anyone else."
/>

Error State

Use the errorMessage prop to show an error message.

Please enter a valid email address

example.blade.php 
<x-slate::input 
    label="Email" 
    type="email" 
    placeholder="Enter your email"
    errorMessage="Please enter a valid email address"
/>

Disabled State

Disable an input by adding the disabled attribute.

example.blade.php 
<x-slate::input disabled placeholder="Disabled input" />
<x-slate::input readonly placeholder="Readonly input" />

Livewire Integration

The Input component automatically detects Livewire and shows loading/error states.

example.blade.php 
<x-slate::input wire:model="email" placeholder="Email" />

API Reference

Props
Prop Type Default Description
type string "text" The HTML input type. Options: text, email, password, number, tel, url, etc.
size string "default" The size of the input. Options: sm, default, lg
disabled boolean false Disable the input
readonly boolean false Make the input readonly
required boolean false Make the input required
autofocus boolean false Autofocus the input
placeholder string null Placeholder text
value string null Input value
name string null Input name attribute
id string null Input ID attribute
label string null Label text
help string null Help text below input
errorMessage string null Error message to display

Sizes
  • sm - Small input (height: 36px)
  • default - Default input (height: 40px)
  • lg - Large input (height: 44px)

Accessibility

The Input component includes:

  • Proper label association
  • ARIA attributes for error states
  • Keyboard navigation support
  • Focus visible states
  • Disabled state handling
  • Button - Button component
  • Field - Form field wrapper with label helpers
Last updated .