InputGroup

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

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

import { useState } from 'react';
import { Field, Input, InputGroup } from 'twenty-ui/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="Show password"
            aria-pressed={visible}
            onClick={() => setVisible(!visible)}
          >
            Show
          </button>
        }
      >
        <Input
          type={visible ? 'text' : 'password'}
          autoComplete="current-password"
        />
      </InputGroup>
    </Field.Root>
  );
};