FieldCombo

import { FieldCombo } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function Affixes() {
  const [value, setValue] = useState('100');
  return <FieldCombo label='Сумма' prefix='$' postfix='USD' value={value} onChange={setValue} />;
}

import { FieldCombo } from '@cloud-ru/ds-fields';
import { SearchSVG } from '@cloud-ru/ds-icons/interface/system';
import { useState } from 'react';

export function IconBefore() {
  const [value, setValue] = useState('');
  return (
    <FieldCombo label='Поиск' placeholder='Найти статью' iconBefore={<SearchSVG />} value={value} onChange={setValue} />
  );
}

import { FieldCombo } from '@cloud-ru/ds-fields';
import { QuestionSVG } from '@cloud-ru/ds-icons/interface/system';
import { useState } from 'react';

export function IconAfter() {
  const [value, setValue] = useState('user@example.com');
  return (
    <FieldCombo
      label='Email'
      placeholder='user@example.com'
      iconAfter={<QuestionSVG />}
      value={value}
      onChange={setValue}
    />
  );
}

import { FieldCombo } from '@cloud-ru/ds-fields';
import { BankCardSVG } from '@cloud-ru/ds-icons/interface/web';
import { useState } from 'react';

export function IconAndAffix() {
  const [value, setValue] = useState('1234');
  return (
    <FieldCombo
      label='Сумма пополнения'
      iconBefore={<BankCardSVG />}
      prefix='₽'
      postfix='/мес'
      value={value}
      onChange={setValue}
    />
  );
}

import { FieldCombo } from '@cloud-ru/ds-fields';
import { CalendarSVG } from '@cloud-ru/ds-icons/interface/system';
import { useState } from 'react';

function formatToday(): string {
  return new Date().toLocaleDateString('ru-RU');
}

export function ElementBefore() {
  const [value, setValue] = useState('');
  return (
    <FieldCombo
      label='Дата'
      placeholder='12.04.2026'
      elementBefore={{
        action: <CalendarSVG />,
        onClick: () => setValue(formatToday()),
      }}
      value={value}
      onChange={setValue}
    />
  );
}

import { FieldCombo } from '@cloud-ru/ds-fields';
import { useState } from 'react';

const CURRENCIES = [
  { id: 'USD', content: { label: 'USD — доллар' } },
  { id: 'EUR', content: { label: 'EUR — евро' } },
  { id: 'RUB', content: { label: 'RUB — рубль' } },
];

export function ElementAfter() {
  const [value, setValue] = useState('100');
  const [currency, setCurrency] = useState<string | number | undefined>('USD');
  return (
    <FieldCombo
      label='Валюта'
      placeholder='Сумма'
      postfix={currency}
      elementAfter={{
        action: currency,
        droplist: {
          items: CURRENCIES,
          closeDroplistOnItemClick: true,
          selection: {
            mode: 'single',
            value: currency,
            onChange: setCurrency,
          },
        },
      }}
      value={value}
      onChange={setValue}
    />
  );
}