Fields

<InputField
  name="email"
  label="Email"
  description="We'll never share your email."
  tooltip="Used for account notifications"
  type="email"
  placeholder="Enter your email"
/>

// Numeric coercion (Zod-friendly): when type="number", value is coerced to number
<InputField
  name="qty"
  label="Quantity"
  description="Must be a number"
  tooltip="Must be a number"
  type="number"
/>

// Or force coercion regardless of type via valueAsNumber
<InputField
  name="qty"
  label="Quantity"
  description="Must be a number"
  tooltip="Must be a number"
  valueAsNumber
/>

<TextareaField
  name="message"
  label="Message"
  placeholder="Type your message..."
  description="We'll never share your message."
  tooltip="Used for account notifications"
  rows={5}
/>

<CheckboxField
  name="agree"
  label="I agree to the terms"
  description="We'll never share your message."
  tooltip="Used for account notifications"
/>

<SwitchField
  name="notifications"
  label="Enable notifications"
  description="We'll never share your message."
  tooltip="Used for account notifications"
/>

<RadioGroupField
  name="plan"
  label="Select Plan"
  description="We'll never share your message."
  tooltip="Used for account notifications"
>
  <Label htmlFor="plan-free" orientation="horizontal">
    <RadioGroupItem value="free" id="plan-free" />
    Free
  </Label>
  <Label htmlFor="plan-pro" orientation="horizontal">
    <RadioGroupItem value="pro" id="plan-pro" />
    Pro ($9/month)
  </Label>
</RadioGroupField>

const currencyItems = [
  { label: "USD", value: "usd" },
  { label: "EUR", value: "eur" },
];

<SelectField
  items={currencyItems}
  name="currency"
  label="Currency"
  labelSize="sm"
>
  <SelectTrigger size="sm">
    <SelectValue placeholder="Select..." />
  </SelectTrigger>
  <SelectContent>
    {currencyItems.map((item) => (
      <SelectItem key={item.value} value={item.value}>
        {item.label}
      </SelectItem>
    ))}
  </SelectContent>
</SelectField>

<DateInputField name="dob" label="Date of birth" />

<PhoneField name="phone" label="Phone" description="We'll never share your message." tooltip="Used for account notifications" />

// Set a different default country (still allows + for international)
<PhoneField name="phone" label="Phone" defaultCountry="NZ" />

// Tag objects (default)
<TagInputField name="topicObjects" label="Topic Objects" description="We'll never share your message." tooltip="Used for account notifications" />

// String[] values (maps to Tag[] internally)
<TagInputField name="topics" label="Topics" asStrings />


// You can pass TagInput props too (e.g., Excel paste, ignore commas)
<TagInputField
  name="skills"
  label="Skills"
  enableExcelPaste
  // Allow commas inside tags (typing + paste)
  enableCommaDelimiter={false}
  options={[{ id: "ts", label: "TypeScript" }, { id: "react", label: "React" }]}
  asStrings
/>

<SliderField
  name="volume"
  label="Volume"
  description="We'll never share your message."
  tooltip="Used for account notifications"
  valueLabel={true}
  min={0}
  max={100}
  step={10}
/>

const locations = [
  { id: "1", label: "New York" },
  { id: "2", label: "London" },
  { id: "3", label: "Tokyo" },
];

<AutocompleteField
  name="location"
  label="Location"
  description="Select your preferred location"
  tooltip="Where you want to work"
  items={locations}
  itemToString={(loc) => loc.label}
  itemToKey={(loc) => loc.id}
  placeholder="Search locations..."
  emptyMessage="No locations found"
/>;

// Simple string array
const tags = ["React", "TypeScript", "Next.js"];

<AutocompleteField
  name="tag"
  label="Tag"
  items={tags}
  itemToString={(tag) => tag}
  placeholder="Search tags..."
/>;