Input

Overview

The Input component wraps Base UI's Input with consistent styling, focus states, and variant support. It's a drop-in replacement for the native <input> element with all the same props.

import { Input } from "@rogo-technologies/ui/input"

<Input placeholder="Enter a value" />

Standard

The default input style with a visible border, suitable for most form contexts.

<Input placeholder="Your name" />

Ghost

Use the ghost prop for a minimal input style with no border or background. Ideal for inline editing scenarios like renaming items.

// Inline rename input
<Input placeholder="Untitled" ghost />

No Borders

Use the noBorders prop for an input with background and focus ring but no visible border. Useful for seamless integration into custom UI where a softer look is needed.

<Input placeholder="Search..." noBorders />

Disabled

Use the disabled prop to prevent user input. The cursor changes and opacity reduces to signal the field is not editable.

<Input placeholder="Not editable" disabled />

File Input

Use type="file" for file upload inputs. File-specific styles are applied automatically.

<Input type="file" />

With Label

Pair the Input with a plain <label> for accessible form fields. Use the type-small text-tertiary utility classes for consistent label styling.

<div className="flex flex-col gap-1">
  <label className="type-small text-tertiary">Email</label>
  <Input placeholder="name@company.com" />
</div>

With Button

Combine Input with a Button for search bars or submit-on-enter patterns.

<div className="flex items-center gap-2">
  <Input placeholder="Search..." />
  <Button variant="outline">Search</Button>
</div>

With Icon

Wrap the input in a relative container and position an icon absolutely for search inputs or other icon-prefixed fields.

import { IconMagnifyingGlass } from "@rogo-technologies/ui/icons"

<div className="relative">
  <IconMagnifyingGlass className="text-tertiary pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2" />
  <Input placeholder="Search..." className="pl-9" />
</div>

Form Example

Use with react-hook-form for validation and controlled forms. The Input is fully compatible with FormControl slot patterns.

import { useForm, FormProvider } from "react-hook-form"
import { Input } from "@rogo-technologies/ui/input"

function MyForm() {
  const form = useForm({ defaultValues: { name: "" } })

  return (
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <div className="flex flex-col gap-1">
          <label className="type-small text-tertiary">Name</label>
          <Input
            placeholder="John Doe"
            {...form.register("name", { required: true })}
          />
        </div>
        <Button type="submit">Submit</Button>
      </form>
    </FormProvider>
  )
}

Props

Additionally, the Input accepts all standard HTML <input> attributes (placeholder, type, value, onChange, readOnly, etc.).

Usage Guidelines

Do

• Use the standard variant for most form fields
• Use ghost for inline editing (e.g., renaming items in a sidebar)
• Pair inputs with labels for accessibility — use type-small text-tertiary for label styling
• Use disabled when the field should be visible but not editable
• Use readOnly with a copy-to-clipboard pattern for credential fields

Don't

• Don't use ghost in standard forms — it lacks the visual boundary users expect
• Don't use noBorders and ghost together — ghost already removes borders
• Don't forget labels for screen reader accessibility
• Don't use Input for multiline content — use a <textarea> instead