Input

import { Field, Input } from 'twenty-ui/primitives/input';

export const EmailField = () => (
  <Field.Root>
    <Field.Label>Email</Field.Label>
    <Input
      name="email"
      type="email"
      autoComplete="email"
      defaultValue="alex@example.com"
    />
    <Field.Description>Use your work email address.</Field.Description>
  </Field.Root>
);

import { useState } from 'react';
import { Field, Input } from 'twenty-ui/primitives/input';

export const EmailField = () => {
  const [email, setEmail] = useState('alex@example.com');

  return (
    <Field.Root>
      <Field.Label>Email</Field.Label>
      <Input
        name="email"
        type="email"
        autoComplete="email"
        value={email}
        onValueChange={setEmail}
      />
      <Field.Description>Use your work email address.</Field.Description>
    </Field.Root>
  );
};

import { IconSearch } from 'twenty-ui/icon';
import { Input, InputGroup } from 'twenty-ui/primitives/input';

export const CompactSearch = () => (
  <InputGroup size="sm" startElement={<IconSearch size={16} aria-hidden />}>
    <Input aria-label="Search contacts" />
  </InputGroup>
);