Nexus DSdocs

Input

Installation

npm install class-variance-authority@^0.7.1 clsx@^2.1.1 tailwind-merge@^3.4.0
lib/field-size.ts
lib/utils.ts
components/input/index.ts
components/input/input.tsx

Code

'use client';

import { Input } from '@/components/input/input';

export default function InputDemo() {
  return (
    <Input
      className="nx:max-w-sm"
      type="email"
      placeholder="you@example.com"
      aria-label="Email"
    />
  );
}

Props

Input

Input props
PropTypeDefaultDescription
size"default" | "sm" | "lg" | null"default"No description
variant"borderless" | "bordered" | null"bordered"No description

Examples

Variants

'use client';

import { Input } from '@/components/input/input';

export default function InputVariants() {
  return (
    <div className="nx:flex nx:w-full nx:max-w-sm nx:flex-col nx:gap-3">
      <Input variant="bordered" placeholder="Bordered" aria-label="Bordered" />
      <Input
        variant="borderless"
        placeholder="Borderless"
        aria-label="Borderless"
      />
    </div>
  );
}

Sizes

'use client';

import { Input } from '@/components/input/input';

export default function InputSizes() {
  return (
    <div className="nx:flex nx:w-full nx:max-w-sm nx:flex-col nx:gap-3">
      <Input size="sm" placeholder="Small" aria-label="Small" />
      <Input size="default" placeholder="Default" aria-label="Default" />
      <Input size="lg" placeholder="Large" aria-label="Large" />
    </div>
  );
}

With label

This example also needs:

npm install @radix-ui/react-label@^2.1.7
components/label/index.ts
components/label/label.tsx
'use client';

import { Input } from '@/components/input/input';
import { Label } from '@/components/label/label';

export default function InputWithLabel() {
  return (
    <div className="nx:grid nx:w-full nx:max-w-sm nx:gap-1.5">
      <Label htmlFor="input-with-label-name">Full name</Label>
      <Input id="input-with-label-name" placeholder="Ada Lovelace" />
    </div>
  );
}

Invalid

This example also needs:

npm install @radix-ui/react-label@^2.1.7 @radix-ui/react-separator@^1.1.8
components/label/index.ts
components/label/label.tsx
components/separator/index.ts
components/separator/separator.tsx
components/field/field.tsx
components/field/index.ts
'use client';

import { Field, FieldError, FieldLabel } from '@/components/field/field';
import { Input } from '@/components/input/input';

export default function InputInvalid() {
  return (
    <Field data-invalid="true" className="nx:max-w-sm">
      <FieldLabel htmlFor="input-invalid-email">Email</FieldLabel>
      <Input
        id="input-invalid-email"
        type="email"
        defaultValue="ada@"
        aria-invalid
        aria-describedby="input-invalid-email-error"
      />
      <FieldError id="input-invalid-email-error">
        Enter a complete email address.
      </FieldError>
    </Field>
  );
}

Disabled

'use client';

import { Input } from '@/components/input/input';

export default function InputDisabled() {
  return (
    <div className="nx:flex nx:w-full nx:max-w-sm nx:flex-col nx:gap-3">
      <Input disabled placeholder="Disabled" aria-label="Disabled" />
      <Input
        disabled
        defaultValue="acct_1024"
        aria-label="Disabled with value"
      />
    </div>
  );
}