Input

Solidtype_heroui.Input is an <input> with the classes HeroUI’s own inputVariants gives and the state its styles read – hovered, focused, focus-visible, disabled, invalid – kept as React Aria keeps it. It takes every attribute an <input> takes and passes them on. Inside a TextField it is Kobalte’s TextField.Input, which the field’s value, state, label and description reach.

Usage

input_usage.mlx

module Input = Solidtype_heroui.Input

let make () =
  <Input class_="w-64" placeholder="Enter your name" aria_label="Name" />

Examples

Variants

`secondary is the variant for an input on a surface.

input_variants.mlx

module Input = Solidtype_heroui.Input

let make () =
  <div class_="flex w-64 flex-col gap-4">
    <Input placeholder="Primary input" aria_label="Primary" variant=`primary />
    <Input
      placeholder="Secondary input" aria_label="Secondary" variant=`secondary
    />
  </div>

Full Width

input_full_width.mlx

module Input = Solidtype_heroui.Input

let make () =
  <div class_="w-[400px] space-y-3">
    <Input
      full_width=true placeholder="Full width input" aria_label="Full width"
    />
  </div>

Input Types

input_types.mlx

module Input = Solidtype_heroui.Input

let make () =
  <div class_="flex w-64 flex-col gap-3">
    <Input type_="text" placeholder="Enter text" aria_label="Text" />
    <Input type_="email" placeholder="name@example.org" aria_label="Email" />
    <Input type_="password" placeholder="Enter password" aria_label="Password"
    />
    <Input type_="number" placeholder="0" aria_label="Number" />
    <Input type_="url" placeholder="https://example.org" aria_label="URL" />
  </div>

Controlled

Alone, an input is an <input>: its value is its value, and its changes are its on_input.

https://heroui.com

input_controlled.mlx

module S = Solidtype.Solid
module Jsx = Solidtype.Jsx
module Input = Solidtype_heroui.Input

external target : Dom.inputEvent -> Dom.htmlInputElement = "target" [@@mel.get]
external value_of : Dom.htmlInputElement -> string = "value" [@@mel.get]

let make () =
  let value, set_value = S.create_signal "heroui.com" in
  <div class_="flex w-64 flex-col gap-2">
    <Input
      aria_label="Domain"
      value=(fun () -> S.get value)
      on_input=(fun e -> S.set set_value (value_of (target e)))
    />
    <span class_="px-1 text-sm text-muted">
      (fun () -> Jsx.string ("https://" ^ S.get value))
    </span>
  </div>

Styling Reference

CSS Classes

• .input, and .input--primary, .input--secondary, .input--full-width

Interactive States

• Hover: :hover or [data-hovered="true"]
• Focus Visible: :focus-visible or [data-focus-visible="true"]
• Invalid: [data-invalid="true"], alone from its aria_invalid
• Disabled: :disabled or [data-disabled="true"]

API Reference

Input takes every attribute an <input> takes, and:

React	solidtype	Type	Default	Description
variant	variant	[ `primary | `secondary ]	`primary, or its field’s	Its look
fullWidth	full_width	bool	false	Whether it takes its container’s width
className	class_	string		Added after HeroUI’s classes

Beside React

Original HeroUI documentation: Input.