InputGroup

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

export const WebsiteField = () => (
  <Field.Root name="website">
    <Field.Label>Website</Field.Label>
    <InputGroup
      startElement={
        <Text render={<span />} aria-hidden>
          https://
        </Text>
      }
    >
      <Input placeholder="example.com" />
    </InputGroup>
    <Field.Description>Enter the domain without https://.</Field.Description>
  </Field.Root>
);

Field.Root
├── Field.Label
├── InputGroup
│   └── Input
└── Field.Description

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

export const PasswordField = () => {
  const [visible, setVisible] = useState(false);

  return (
    <Field.Root name="password">
      <Field.Label>Password</Field.Label>
      <InputGroup
        endElement={
          <Button
            type="button"
            aria-label={visible ? 'Hide password' : 'Show password'}
            variant="ghost"
            size="sm"
            onClick={() => setVisible(!visible)}
          >
            {visible ? 'Hide' : 'Show'}
          </Button>
        }
      >
        <Input
          type={visible ? 'text' : 'password'}
          autoComplete="current-password"
        />
      </InputGroup>
    </Field.Root>
  );
};