RadCN
Inputsreadycomponentready

Input

A native input primitive for text, email, file, label, helper text, and button composition.

Importimport { Input } from 'radcn/input'
Preview

Live package example

Render the six plain shadcn Input examples with native Remix 3 controls and explicit RadCN composition.

Example Parity

Render the six plain shadcn Input examples with native Remix 3 controls and explicit RadCN composition.

Preview

Enter your workspace email address.

import { Button } from 'radcn/button'
import { Input } from 'radcn/input'
import { Label } from 'radcn/label'

export function InputPreview() {
  return (
    <div class="input-examples">
      <Input type="email" placeholder="Email" />

      <Input disabled type="email" placeholder="Email" />

      <div class="field">
        <Label for="picture">Picture</Label>
        <Input id="picture" type="file" />
      </div>

      <form class="row" action="/subscribe" method="post">
        <Input name="email" type="email" placeholder="Email" />
        <Button type="submit" variant="outline">Subscribe</Button>
      </form>

      <div class="field">
        <Label for="email">Email</Label>
        <Input id="email" type="email" placeholder="Email" />
      </div>

      <div class="field">
        <Label for="described-email">Email</Label>
        <Input
          ariaDescribedBy="email-help"
          id="described-email"
          type="email"
          placeholder="Email"
        />
        <p id="email-help">Enter your workspace email address.</p>
      </div>
    </div>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Input } from 'radcn/input'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Renders native input elements, preserving browser focus, editing, file picker, and form submission behavior.
  • Supports aria-describedby and aria-invalid for field help and validation state through explicit string props.
  • Leaves labeling to real Label components and native label elements so accessible names stay explicit.
  • File inputs do not use role="textbox"; they keep browser-native file input semantics.

Customization

  • Input dimensions, borders, focus rings, placeholder color, disabled state, and file selector styling are controlled by RadCN CSS variables.
  • The public data-radcn-input hook supports targeted app CSS without relying on generated DOM wrappers.
  • Button and Label composition stays outside the Input package, so layout and submission behavior remain app-owned.

Remix 3 Notes

  • The Remix 3 input uses explicit string props such as ariaDescribedBy instead of React prop aliases.
  • It keeps a deliberate typed native input surface instead of forwarding arbitrary React ComponentProps.
  • Label, Button, helper text, and form state are explicit composition, not Input-owned behavior.