---
applyTo: "**/*.tsx,**/*.jsx"
---

# @cfx-dev/ui-components — Form Components

## Input

Text input with built-in search/clear, loading state, and decorator support:

```tsx
import { Input, RichInput } from '@cfx-dev/ui-components';

<Input
  placeholder="Search..."
  type="search"
  value={query}
  onChange={setQuery}
/>

<Input
  type="number"
  min={0}
  max={100}
  value={count}
  onChange={(val) => setCount(Number(val))}
/>

<Input
  placeholder="Enter value"
  state="error"           // 'default' | 'success' | 'error'
  loading
  fullWidth
  decorator={<Icon name="Search" />}
/>
```

Key props: `type` (`text`, `password`, `search`, `number`), `value`, `onChange` (returns string), `state`, `loading`, `disabled`, `fullWidth`, `decorator`, `placeholder`, `placeholderIcon`, `pattern`.



## Select

Radix-based select dropdown:

```tsx
import { Select } from '@cfx-dev/ui-components';

const options = [
  { value: 'us', label: 'United States' },
  { value: 'eu', label: 'Europe' },
  { value: 'asia', label: 'Asia' },
];

<Select
  options={options}
  value={selected}
  onChange={setSelected}
  placeholder="Choose region"
  fullWidth
/>
```

## DropdownSelect

Alternative dropdown with custom trigger:

```tsx
import { DropdownSelect } from '@cfx-dev/ui-components';

<DropdownSelect {...props} />
```

## DropdownMenu

Radix-based dropdown menu for actions:

```tsx
import { DropdownMenu } from '@cfx-dev/ui-components';

<DropdownMenu {...props} />
```

## Checkbox

Radix-based checkbox with theme support:

```tsx
import { Checkbox } from '@cfx-dev/ui-components';

<Checkbox
  checked={isChecked}
  onCheckedChange={setIsChecked}
  size="medium"           // 'small' | 'medium' | 'large'
  theme="primary"         // 'primary' | 'secondary'
/>

// With custom color
<Checkbox checked={true} color="green" />
```

## Switch

Radix-based toggle switch:

```tsx
import { Switch } from '@cfx-dev/ui-components';

<Switch
  checked={isEnabled}
  onCheckedChange={setIsEnabled}
  theme="primary"         // 'primary' | 'secondary'
  view="default"          // 'default' | 'alternative'
/>
```

## Radio

Radio button group:

```tsx
import { Radio } from '@cfx-dev/ui-components';

<Radio
  size="medium"           // 'small' | 'medium' | 'large'
  {...props}
/>
```

## Textarea

Multi-line text input:

```tsx
import { Textarea } from '@cfx-dev/ui-components';

<Textarea value={text} onChange={setText} />
```

For unstyled textarea with custom container: `StyledTextarea`.

## ToggleGroup

Segmented control / button group for single-select options:

```tsx
import { ToggleGroup } from '@cfx-dev/ui-components';

const options = [
  { value: 'list', label: 'List', icon: <Icon name="List" /> },
  { value: 'grid', label: 'Grid', icon: <Icon name="Grid" /> },
];

<ToggleGroup
  options={options}
  value={view}
  onChange={setView}
  size="small"            // 'small' | 'large'
/>
```

## Slider

Radix-based range slider:

```tsx
import { Slider } from '@cfx-dev/ui-components';

<Slider value={[volume]} onValueChange={([v]) => setVolume(v)} min={0} max={100} />
```

## Range / RangeWithInputs

Range picker with min/max values and optional text inputs:

```tsx
import { Range, RangeWithInputs } from '@cfx-dev/ui-components';

<RangeWithInputs
  min={0}
  max={1000}
  value={[minPrice, maxPrice]}
  onValueChange={setPriceRange}
/>
```

## InputDropzone

File upload dropzone (react-dropzone powered):

```tsx
import { InputDropzone, DropzoneItemPreview } from '@cfx-dev/ui-components';

<InputDropzone
  accept={{ 'image/*': ['.png', '.jpg'] }}
  maxFiles={5}
  onDrop={handleFiles}
/>
```