# React Form Control Group Component API

> Explore the API reference for the React Form Control Group components and discover how to effectively utilize their props for customization.

## CFormControlGroup

```jsx
import { CFormControlGroup } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | - | A string of all className you want applied to the component. |
| `size` | `"sm" \| "lg"` | - | Size the frame small or large - every part inside follows it. |

## CFormControlIcon

```jsx
import { CFormControlIcon } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | - | A string of all className you want applied to the component. |

## CFormControlText

```jsx
import { CFormControlText } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | - | A string of all className you want applied to the component. |

## CFormControlAction

```jsx
import { CFormControlAction } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | - | A string of all className you want applied to the component. Remember to give the action an accessible name through `aria-label`. |

## CFormControlCleaner

```jsx
import { CFormControlCleaner } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaLabel` | `string` | `Clear` | `aria-label` of the button. |
| `className` | `string` | - | A string of all className you want applied to the component. |