Input

Input

The Input component provides a styled field for entering and editing text and other supported input values.

import Input from "rocksolidjs/Input";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <div class="flex flex-col gap-1">
      <Label for="name">Name</Label>
      <Input
        id="name"
        placeholder="Enter your name"
      />
    </div>
  );
}

Examples

Colors

Use the color prop to communicate the semantic state or meaning of the input.

import Input from "rocksolidjs/Input";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <Input
        color="default"
        placeholder="Default"
        aria-label="Default"
      />
      <Input
        color="success"
        value="john@example.com"
        aria-label="Valid email"
      />
      <Input
        color="warning"
        value="john@example"
        aria-label="Email with warning"
      />
      <Input
        color="info"
        placeholder="Enter your username"
        aria-label="Username"
      />
      <Input
        color="error"
        value="invalid-value"
        aria-label="Invalid value"
      />
    </div>
  );
}

Sizes

Use the size prop to control the visual size of the input.

import Input from "rocksolidjs/Input";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <Input
        size="small"
        placeholder="Small input"
        aria-label="Small input"
      />
      <Input
        size="medium"
        placeholder="Medium input"
        aria-label="Medium input"
      />
      <Input
        size="large"
        placeholder="Large input"
        aria-label="Large input"
      />
    </div>
  );
}

Variants

Use the variant prop to control the visual style of the input.

import Input from "rocksolidjs/Input";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <Input
        variant="outlined"
        placeholder="Outlined variant"
        aria-label="Outlined variant"
      />
      <Input
        variant="filled"
        placeholder="Filled variant"
        aria-label="Filled variant"
      />
      <Input
        variant="ghost"
        placeholder="Ghost variant"
        aria-label="Ghost variant"
      />
    </div>
  );
}

Full Width

Use the fullWidth prop to make the input fill the available width of its parent container.

import Input from "rocksolidjs/Input";

export default function Example() {
  return (
    <div class="w-full">
      <Input
        fullWidth
        placeholder="Enter your email address"
        aria-label="Email address"
      />
    </div>
  );
}

Prefix and Suffix

Use the prefix and suffix props to display content before or after the input value.

Prefixes and suffixes can be used for icons, units, or other contextual content.

import Input from "rocksolidjs/Input";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <Input
        prefix="https://"
        placeholder="example.com"
        aria-label="Website"
      />
      <Input
        placeholder="0.00"
        suffix="USD"
        aria-label="Amount"
      />
      <Input
        prefix="$"
        placeholder="0.00"
        suffix="USD"
        aria-label="Price"
      />
    </div>
  );
}

Input Types

Use the type prop to specify the type of input field.

import Input from "rocksolidjs/Input";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <Input
        type="text"
        placeholder="Full name"
        aria-label="Full name"
      />
      <Input
        type="email"
        placeholder="you@example.com"
        aria-label="Email address"
      />
      <Input
        type="password"
        placeholder="Enter your password"
        aria-label="Password"
      />
      <Input
        type="number"
        placeholder="Enter your age"
        aria-label="Age"
      />
      <Input
        type="search"
        placeholder="Search..."
        aria-label="Search"
      />
      <Input
        type="tel"
        placeholder="+1 555 123 4567"
        aria-label="Phone number"
      />
      <Input
        type="url"
        placeholder="https://example.com"
        aria-label="Website URL"
      />
    </div>
  );
}

The type prop supports the following input types: number, search, time, image, text, color, date, datetime-local, email, file, month, password, tel, url, and week.

Use the most appropriate input type for the expected value so browsers and assistive technologies can provide the correct behavior and keyboard experience.

Controlled Value

Use the value prop together with onInput to control the input value.

import { createSignal } from "solid-js";
import Input from "rocksolidjs/Input";

export default function Example() {
  const [value, setValue] = createSignal("");
  const maxLength = 10;
  return (
    <Input
      value={value()}
      onInput={(event: InputEvent) => setValue((event.target as HTMLInputElement).value)}
      placeholder="Type something..."
      aria-label="Controlled input"
      color={value().length > maxLength ? "error" : "default"}
      suffix={`${value().length } / ${maxLength}`}
    />
  );
}

The onInput handler receives the native InputEvent, which can be used to update the signal that controls the input.

Customization

Use class to apply custom classes to the Input component.

For more targeted customization, use slotProps to provide props to individual component slots.

The available slots are:

  • base — Props applied to the base input element.
  • prefix — Props applied to the prefix element.
  • suffix — Props applied to the suffix element.
import Input from "rocksolidjs/Input";

export default function Example() {
  return (
    <Input
      class="custom-input"
      placeholder="Search documentation"
      prefix={<span>Search</span>}
      suffix={<span>⌘K</span>}
      slotProps={{
        base: {
          "aria-label": "Search documentation",
        },
        prefix: {
          class: "text-muted-foreground",
        },
        suffix: {
          class: "text-muted-foreground",
        },
      }}
    />
  );
}

Accessibility

  • Use the appropriate type for the expected input value.
  • Provide an accessible label for every input.
  • Do not rely on color alone to communicate validation or status.
  • Use the error color together with appropriate text or other accessible feedback when communicating validation errors.
  • Ensure prefixes and suffixes do not obscure or replace essential information available to assistive technologies.
  • Use appropriate autocomplete attributes when collecting common user information.
  • Ensure the input has sufficient color contrast in all supported variants and states.

API

Input

The Input component supports semantic colors, visual sizes, variants, native input types, controlled and uncontrolled values, prefixes, suffixes, and slot-level customization.

Prop Type Required Default Description
class string No — Additional CSS classes applied to the input.
color "default" | "success" | "warning" | "info" | "error" No "default" Controls the semantic color and state styling of the input.
disabled boolean No false If true, the input is disabled and cannot be interacted with.
fullWidth boolean No false Makes the input fill the available width of its parent container.
inputSize number No — Sets the native HTML size attribute, controlling the approximate number of visible characters.
onInput (event: InputEvent) => void No — Callback invoked when the input value changes. Receives the native InputEvent.
prefix JSXElement No — Content displayed before the input value.
size "small" | "medium" | "large" No "medium" Controls the visual size of the input.
slotProps { base?: object; prefix?: object; suffix?: object } No — Provides props for customizing the Input slots.
  • base — Props for the base input slot.
  • prefix — Props for the prefix slot.
  • suffix — Props for the suffix slot.
suffix JSXElement No — Content displayed after the input value.
type "number" | "search" | "time" | "image" | "text" | "color" | "date" | "datetime-local" | "email" | "file" | "month" | "password" | "tel" | "url" | "week" No "text" Specifies the type of input to render.
value string | number No — Controls the current value of the input.
variant "filled" | "outlined" | "ghost" No "outlined" Controls the visual style of the input.
  • Textarea — Use Textarea for multi-line text input.
  • Select — Use Select when users need to choose from a predefined set of options.