Input

Preview

import { Input } from "@/registry/components/input/react/input";


export function InputDemo() {
    return <Input placeholder="Enter your email" />;
}

Installation

You can add the dialog component in two ways:

  1. During project initialization:
pnpm dlx make-sugarcube@latest init
npx make-sugarcube@latest init
yarn make-sugarcube@latest init
bunx --bun make-sugarcube@latest init

Then select the dialog component when prompted.

  1. After initialization:
pnpm dlx make-sugarcube@latest components input --framework react
npx make-sugarcube@latest components input --framework react
yarn make-sugarcube@latest components input --framework react
bunx --bun make-sugarcube@latest components input --framework react

What’s included

When you add the input component, you get:

  • input.tsx - The React component implementation
  • @clsx - The clsx utility for conditional classes
import type * as React from "react";


import cn from "clsx";


function Input({ className, type, ...props }: React.ComponentProps<"input">) {
    return <input type={type} className={cn("input", className)} {...props} />;
}


export { Input };
{
  "input": {
    "bg": { "$value": "{surface.primary}" },
    "color": { "$value": "{text.primary}" },
    "border": { "$value": "{border.input}" },
    "radius": { "$value": "{radius.lg}" },
    "shadow": { "$value": "{shadow.xs}" },
    "padding": {
      "block": { "$value": "{space.2xs}" },
      "inline": { "$value": "{space.xs}" }
    },
    "font": { "$value": "{font.sans}" },
    "size": { "$value": "{text.xs}" },
    "weight": { "$value": "{font.weight.normal}" },
    "accent": { "$value": "{color.neutral.900}" }
  }
}

Examples

:::note The following examples show how to use data attributes for variants. This is just one possible approach. See the principles section for more information on how to approach component variants. :::