Input

<div className="flex w-full max-w-sm flex-col gap-3">
  <Input placeholder="https://example.ru" />
  <Input type="email" defaultValue="hello@kvality.io" />
  <Input disabled placeholder="Недоступно" />
  <Input aria-invalid placeholder="С ошибкой" />
</div>

function Example() {
  const [value, setValue] = useState('');
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Input
        value={value}
        onChange={(event) => setValue(event.target.value)}
        placeholder="Название проекта"
      />
      <span className="text-12-regular text-fg-tertiary">
        Символов: {value.length}
      </span>
    </div>
  );
}

render(<Example />);