novixuiv0.1
Install

Recipes · Product

Forms

Grouped inputs, inline validation, autocomplete-friendly semantics, and a clear primary action.

Preview

The exact composition below is what ships in production apps built on Nova.

We'll send a confirmation.

Source

tsx
import { Button, Input, Label } from "@novix-ui/react";
 
export function AccountForm({ onSubmit }) {
  return (
    <form className="max-w-md space-y-4" onSubmit={onSubmit}>
      <div className="space-y-1.5">
        <Label htmlFor="name" required>Full name</Label>
        <Input id="name" autoComplete="name" />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="email" required>Email</Label>
        <Input id="email" type="email" autoComplete="email" hint="We'll send a confirmation." />
      </div>
      <div className="flex justify-end gap-2">
        <Button variant="ghost" type="button">Cancel</Button>
        <Button type="submit">Create account</Button>
      </div>
    </form>
  );
}

Anatomy

  • Label above input, 6px gap. Hint text below input, muted.
  • Required/optional indicator on the Label — pick one convention per form.
  • Errors replace hint text. Set aria-invalid on the input.
  • Primary action on the right; ghost cancel to the left.