RetroField

Composable form layout primitives: labels, descriptions, errors, fieldsets and group boxes with Mac OS 9 styling. Works with any form library.

Installation

npx shadcn@latest add "https://nostalgia-ui.com/r/retro-field.json"

Setup: installing any component also installs nostalgia-theme (the --os9-* tokens and os9-* utilities) via registryDependencies. To add the theme on its own: npx shadcn@latest add https://nostalgia-ui.com/r/nostalgia-theme.json

Import

import { RetroField } from "@/components/ui/retro-field"

Usage

<RetroFieldSet>
  <RetroFieldLegend>Sharing Setup</RetroFieldLegend>
  <RetroFieldGroup>
    <RetroField>
      <RetroFieldLabel htmlFor="owner">Owner Name</RetroFieldLabel>
      <RetroInput id="owner" />
      <RetroFieldDescription>Shown to other users on the network.</RetroFieldDescription>
    </RetroField>
  </RetroFieldGroup>
</RetroFieldSet>

Basic Field

Other computers on the network see this name.

Fieldset with Group

Sharing Setup

Network identity for this Macintosh.

Must be at least 8 characters.

Group Box Variant

Memory

Horizontal Orientation

Play the system alert when an error occurs.

Tint icons in the Finder with their label color.

Choice Cards

Startup Disk

Validation Errors

Separator with Label

or
View sourceBack to overview