Input

Text inputs with four variants, plus Password, Search and TextArea built in.

"use client";

import { Input, Box } from "astralis-ui";

export function InputDemo() {
  return (
    <Box w="full" maxW="xs">
      <Input placeholder="you@example.com" type="email" />
    </Box>
  );
}

Import#

import { Input, InputGroup } from "astralis-ui";
// Input.Password, Input.Search, Input.TextArea

Variants#

outline

filled

underline

unstyled

"use client";

import { Input, Text, VStack } from "astralis-ui";

const variants = ["outline", "filled", "underline", "unstyled"] as const;

export function InputVariants() {
  return (
    <VStack gap="4" alignItems="stretch" w="full" maxW="xs">
      {variants.map((variant) => (
        <VStack key={variant} gap="1" alignItems="stretch">
          <Text as="span" size="xs" color="muted">{variant}</Text>
          <Input variant={variant} placeholder={`The ${variant} variant`} />
        </VStack>
      ))}
    </VStack>
  );
}

Password, Search and TextArea#

Input.Password manages its own visibility toggle; Input.Search fires onSearch on Enter (or its optional button); Input.TextArea adds a character counter via showCount + maxLength.

0/120

"use client";

import { useState } from "react";
import { Input, Text, VStack } from "astralis-ui";

export function InputTypes() {
  const [query, setQuery] = useState("");

  return (
    <VStack gap="4" alignItems="stretch" w="full" maxW="xs">
      <Input.Password placeholder="Password with visibility toggle" />
      <VStack gap="1" alignItems="stretch">
        <Input.Search
          placeholder="Search the docs…"
          showSearchButton
          onSearch={setQuery}
        />
        {query && (
          <Text size="xs" color="muted">Searched for “{query}”</Text>
        )}
      </VStack>
      <Input.TextArea placeholder="Short bio…" rows={3} maxLength={120} showCount />
    </VStack>
  );
}

Prefix and suffix#

Wrap in InputGroup for decorative slots on either side — the input pads itself automatically.

.astralis.dev

"use client";

import { Input, InputGroup, Icon, Text, VStack } from "astralis-ui";
import { Mail, Link2 } from "lucide-react";

export function InputGroupDemo() {
  return (
    <VStack gap="4" alignItems="stretch" w="full" maxW="xs">
      <InputGroup prefix={<Icon as={Mail} size="xs" />}>
        <Input placeholder="Email address" />
      </InputGroup>
      <InputGroup
        prefix={<Icon as={Link2} size="xs" />}
        suffix={<Text as="span" size="xs" color="subtle">.astralis.dev</Text>}
      >
        <Input placeholder="your-site" />
      </InputGroup>
    </VStack>
  );
}

Props#

Inputs accept all native attributes of their element, plus:

Prop	Type	Default	Description
`variant`	`"outline" \| "filled" \| "underline" \| "unstyled"`	`"outline"`	Visual style.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Height and padding.
`invalid` / `disabled` / `readOnly`	`boolean`	`false`	State flags — inherited automatically inside a Field.

Sub-component	Extra props
`Input.Search`	`onSearch(value)`, `showSearchButton`
`Input.TextArea`	`rows`, `maxLength`, `showCount`
`InputGroup`	`prefix`, `suffix` (non-interactive slots)

Accessibility#

State flags map to aria-invalid / aria-readonly, and a wrapping Field wires the label and ids for you.