p-field-2

PreviousNext

Field with required indicator

Docs
cossblock

Preview

Loading preview…
registry/default/particles/p-field-2.tsx
import { Field, FieldError, FieldLabel } from "@/registry/default/ui/field";
import { Input } from "@/registry/default/ui/input";

export default function Particle() {
  return (
    <Field>
      <FieldLabel>
        Password <span className="text-destructive-foreground">*</span>
      </FieldLabel>
      <Input placeholder="Enter password" required type="password" />
      <FieldError>Please fill out this field.</FieldError>
    </Field>
  );
}

Installation

npx shadcn@latest add @coss/p-field-2

Usage

import { PField2 } from "@/components/p-field-2"
<PField2 />