JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 77
  • Score
    100M100P100Q73375F
  • License MIT

17 accessible form React components for Ninna UI - Input, Select, Checkbox, Switch, Radio, Slider, FileUpload, PinInput, NumberInput, and more. Radix-powered, Tailwind CSS v4.

Package Exports

  • @ninna-ui/forms
  • @ninna-ui/forms/package.json

Readme

@ninna-ui/forms

17 production-ready React form components - inputs, selects, checkboxes, switches, sliders, file uploads, and more. Radix-powered accessibility with automatic ARIA wiring, validation states, and zero Radix API leakage.

npm License: MIT

📖 Full Documentation →  |  📦 npm →  |  🐙 GitHub →

The complete form toolkit for Ninna UI. Complex interactive controls (Switch, RadioGroup, Select, Slider) are powered by Radix UI internally for bulletproof WAI-ARIA compliance, keyboard navigation, and focus management - but Radix types never leak into your code.

Every component ships with forwardRef, className merging, data-slot CSS targeting, and seamless integration with the built-in form infrastructure (FormControl, Field) for automatic label association, validation messages, and ARIA attribute wiring.

Installation

pnpm add @ninna-ui/forms @ninna-ui/core

CSS Setup

@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";

@variant dark (&:is(.dark *));

HTML Setup

Add the data-theme attribute to your <html> element:

<html data-theme="default">

Components

Form Infrastructure

Component Description
FormControl Context provider for label/message/input association
FormLabel Accessible label linked to its control
FormMessage Validation/helper message with error/success states
Field All-in-one: label + input + message in a single component
FormGroup Groups related form fields

Simple Inputs

Component Description Variants Colors
Input Text input field outline, filled, flushed 8
Textarea Multi-line text input outline, filled, flushed 8
NumberInput Numeric input with increment/decrement outline, filled, flushed 8
PinInput PIN/OTP code input outline, filled, flushed 8
InputGroup / InputAddon Input with prefix/suffix addons - -
HiddenField Hidden form input - -

Radix-Powered Controls

Component Description Variants Colors
Switch Toggle switch outline, soft, solid 8
RadioGroup / RadioCard Radio selection with card variant outline, soft, solid 8
Select Dropdown select with search - 8
Slider Range slider with marks outline, soft, solid 8

Native Controls

Component Description Variants Colors
Checkbox / CheckboxGroup Native checkbox with indeterminate support outline, soft, solid 8

Advanced

Component Description
FileUpload / FileUploadItem Drag-and-drop file upload with validation

Quick Start

import { Field, Input, Select, SelectItem, Checkbox, Switch } from "@ninna-ui/forms";
import { VStack } from "@ninna-ui/layout";
import { Button } from "@ninna-ui/primitives";

function SignupForm() {
  return (
    <form>
      <VStack gap="md">
        <Field label="Email" required>
          <Input type="email" placeholder="you@example.com" />
        </Field>

        <Field label="Role">
          <Select placeholder="Select a role">
            <SelectItem value="admin">Admin</SelectItem>
            <SelectItem value="user">User</SelectItem>
          </Select>
        </Field>

        <Checkbox color="primary">I agree to the terms</Checkbox>

        <Switch color="primary">Enable notifications</Switch>

        <Button type="submit" color="primary">Sign Up</Button>
      </VStack>
    </form>
  );
}

All Exports

import {
  // Form Infrastructure
  FormControl, useFormControl, useFormControlProps,
  FormLabel, FormMessage, Field, FormGroup,
  type FormControlProps, type FormLabelProps,
  type FormMessageProps, type FieldProps, type FormGroupProps,

  // Simple Inputs
  Input, type InputProps,
  Textarea, type TextareaProps,
  NumberInput, type NumberInputProps,
  PinInput, type PinInputProps,
  InputGroup, InputAddon, type InputGroupProps, type InputAddonProps,
  HiddenField, type HiddenFieldProps,

  // Native Controls
  Checkbox, CheckboxGroup, CheckboxGroupItem,
  type CheckboxProps, type CheckboxGroupProps,

  // Radix-Powered Controls
  Switch, type SwitchProps,
  RadioGroup, RadioGroupItem, RadioCard,
  type RadioGroupProps, type RadioGroupItemProps, type RadioCardProps,
  Select, SelectItem, SelectGroup, SelectSeparator,
  type SelectProps, type SelectItemProps,
  Slider, type SliderProps,

  // Advanced
  FileUpload, FileUploadItem,
  type FileUploadProps, type FileRejection,
} from "@ninna-ui/forms";

Accessibility

  • Radix-powered - Switch, Radio, Select, and Slider use Radix for WAI-ARIA compliance, keyboard navigation, and focus management
  • Native checkbox - Checkbox/CheckboxGroup use semantic native input behavior with explicit ARIA wiring
  • Form association - FormControl automatically links labels, inputs, and error messages via id/aria-describedby
  • Validation - aria-invalid, aria-required, and aria-describedby wired automatically
  • Keyboard - Full keyboard navigation on all interactive controls

License

MIT