Playground

Component

Embedded playgrounds stay on this URL. Choosing another component sends you to its docs; use the Playground tab beside Component on that screen.

Playground

Configure the field, addons, validation, and CTA button icons. The JSX snippet updates as you go.

JSX

import {  } from "lucide-react";
import { Input } from "@/components/ds/input";

<Input
  label="Email"
  placeholder="you@cognisync.com"
  leadingIcon={<undefined size={16} />}
  clearable
/>