Skip to content
Paramanu v0.1.0-alpha.0

Input

The Input component provides a styled text input field with multiple visual variants, sizes, and states for form data entry.

Basic Usage

import { Input } from "@paramanu/forms-react"


export default function App() {
  return <Input placeholder="Enter text..." />
}
<input class="pm-input pm-input--outline pm-input--md" type="text" placeholder="Enter text..." />

Variants

import { Input } from "@paramanu/forms-react"


export default function App() {
  return (
    <>
      <Input variant="outline" placeholder="Outline" />
      <Input variant="filled" placeholder="Filled" />
      <Input variant="unstyled" placeholder="Unstyled" />
    </>
  )
}
<input class="pm-input pm-input--outline pm-input--md" placeholder="Outline" />
<input class="pm-input pm-input--filled pm-input--md" placeholder="Filled" />
<input class="pm-input pm-input--unstyled pm-input--md" placeholder="Unstyled" />

Sizes

import { Input } from "@paramanu/forms-react"


export default function App() {
  return (
    <>
      <Input size="xs" placeholder="Extra small" />
      <Input size="sm" placeholder="Small" />
      <Input size="md" placeholder="Medium" />
      <Input size="lg" placeholder="Large" />
    </>
  )
}
<input class="pm-input pm-input--outline pm-input--xs" placeholder="Extra small" />
<input class="pm-input pm-input--outline pm-input--sm" placeholder="Small" />
<input class="pm-input pm-input--outline pm-input--md" placeholder="Medium" />
<input class="pm-input pm-input--outline pm-input--lg" placeholder="Large" />

States

import { Input } from "@paramanu/forms-react"


export default function App() {
  return (
    <>
      <Input disabled placeholder="Disabled" />
      <Input invalid placeholder="Invalid" />
      <Input readOnly defaultValue="Read only" />
    </>
  )
}
<input class="pm-input pm-input--outline pm-input--md pm-input--disabled" placeholder="Disabled" disabled aria-disabled="true" />
<input class="pm-input pm-input--outline pm-input--md pm-input--invalid" placeholder="Invalid" aria-invalid="true" />
<input class="pm-input pm-input--outline pm-input--md pm-input--read-only" value="Read only" readonly />