Forms

Input

Captures short text, email, password, search, or numeric values.

View preview API reference View in Figma

FrameworksAstro · React · Elements

Registry commandlumen add Input

InteractionNative markup

Design sourceLinked component node

See it and copy it

Framework example

Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.

Small input

Large input

Disabled input

Workspace slug

Use lowercase letters, numbers, and hyphens only.

View Input code

Framework usage

Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.

---
import {
  Field,
  Input,
  Label,
  Stack
} from '@santi020k/lumen-astro'
---

<Stack gap="sm" style="max-width: 24rem">
  <Field>
    <Label for="ex-input-small">Small input</Label>
    <Input id="ex-input-small" name="small-input" placeholder="Small" visualSize="sm" />
  </Field>
  <Field>
    <Label for="ex-input-email">Email</Label>
    <Input id="ex-input-email" name="email" placeholder="[email protected]" type="email" />
  </Field>
  <Field>
    <Label for="ex-input-large">Large input</Label>
    <Input id="ex-input-large" name="large-input" placeholder="Large" visualSize="lg" />
  </Field>
  <Field>
    <Label for="ex-input-disabled">Disabled input</Label>
    <Input id="ex-input-disabled" name="disabled-input" disabled placeholder="Disabled" />
  </Field>
  <Field>
    <Label for="ex-input-invalid">Workspace slug</Label>
    <Input
      aria-describedby="ex-input-invalid-error"
      aria-invalid="true"
      id="ex-input-invalid"
      name="workspace-slug"
      value="lumen docs"
    />
    <p id="ex-input-invalid-error">Use lowercase letters, numbers, and hyphens only.</p>
  </Field>
</Stack>

import {
  Field,
  Input,
  Label,
  Stack
} from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <Stack gap="sm" style={{ "maxWidth": "24rem" }}>
      <Field>
        <Label htmlFor="ex-input-small">Small input</Label>
        <Input id="ex-input-small" name="small-input" placeholder="Small" visualSize="sm" />
      </Field>
      <Field>
        <Label htmlFor="ex-input-email">Email</Label>
        <Input id="ex-input-email" name="email" placeholder="[email protected]" type="email" />
      </Field>
      <Field>
        <Label htmlFor="ex-input-large">Large input</Label>
        <Input id="ex-input-large" name="large-input" placeholder="Large" visualSize="lg" />
      </Field>
      <Field>
        <Label htmlFor="ex-input-disabled">Disabled input</Label>
        <Input id="ex-input-disabled" name="disabled-input" disabled placeholder="Disabled" />
      </Field>
      <Field>
        <Label htmlFor="ex-input-invalid">Workspace slug</Label>
        <Input
          aria-describedby="ex-input-invalid-error"
          aria-invalid="true"
          id="ex-input-invalid"
          name="workspace-slug"
          defaultValue="lumen docs"
        />
        <p id="ex-input-invalid-error">Use lowercase letters, numbers, and hyphens only.</p>
      </Field>
    </Stack>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-stack gap="sm" style="max-width: 24rem">
  <lumen-field>
    <lumen-label for="ex-input-small">Small input</lumen-label>
    <lumen-input id="ex-input-small" name="small-input" placeholder="Small" visual-size="sm"></lumen-input>
  </lumen-field>
  <lumen-field>
    <lumen-label for="ex-input-email">Email</lumen-label>
    <lumen-input id="ex-input-email" name="email" placeholder="[email protected]" type="email"></lumen-input>
  </lumen-field>
  <lumen-field>
    <lumen-label for="ex-input-large">Large input</lumen-label>
    <lumen-input id="ex-input-large" name="large-input" placeholder="Large" visual-size="lg"></lumen-input>
  </lumen-field>
  <lumen-field>
    <lumen-label for="ex-input-disabled">Disabled input</lumen-label>
    <lumen-input id="ex-input-disabled" name="disabled-input" disabled placeholder="Disabled"></lumen-input>
  </lumen-field>
  <lumen-field>
    <lumen-label for="ex-input-invalid">Workspace slug</lumen-label>
    <lumen-input
      aria-describedby="ex-input-invalid-error"
      aria-invalid="true"
      id="ex-input-invalid"
      name="workspace-slug"
      value="lumen docs"></lumen-input>
    <p id="ex-input-invalid-error">Use lowercase letters, numbers, and hyphens only.</p>
  </lumen-field>
</lumen-stack>

Edit Input in browser

Choose your target

Add this component

Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.

pnpm add @santi020k/lumen-astro

pnpm add @santi020k/lumen-astro

lumen add Input

lumen add Input

pnpm add @santi020k/lumen-react

pnpm add @santi020k/lumen-react

lumen add Input --target react

lumen add Input --target react

pnpm add @santi020k/lumen-elements

pnpm add @santi020k/lumen-elements

lumen add Input --target elements

lumen add Input --target elements

API reference

Lumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.

Attribute	Values	Default	Description
type	HTML input type	"text"	Sets the native input type.
size	number	native default	Sets the native input width in characters.
visualSize, visual-size	"default" \| "sm" \| "lg"	"default"	Controls field height and font size. Use visualSize in Astro/React and visual-size in Elements.
class, className	string	""	Merges custom classes with the generated ui-* root classes.
...native attributes	HTML attributes	-	Forwards standard attributes to the root element unless the component consumes them.

Framework example

Add this component

API reference

Help improve Input