# Form control
Low-level text control - no label wrapper, for custom layouts.
Preview: https://design.freecodecamp.org/playground#form-control
## Add to your project
Use React and TypeScript. Required packages: `react@>=18 <20`. No freeCodeCamp package is needed.
Copy the files below to the indicated paths, relative to your project root. If you change the layout, update relative imports too.
Import the CSS once from your application entry. For an entry in src/:
```ts
import './ui/theme/tokens.css';
import './ui/theme/base.css';
import './ui/form-control/form-control.css';
import './ui/input/input.css';
import './ui/form-group/form-group.css';
```
The theme is shared: reuse it if already installed. Fonts use /fonts/ URLs on your host. Download the font files listed in https://design.freecodecamp.org/registry/starter.md or change those URLs in your copied tokens.css.
## Example
```tsx
import { FormGroup } from './ui/form-group/FormGroup';
import { FormControl } from './ui/form-control/FormControl';
export function Example() {
return (
);
}
```
## Component source
### src/ui/form-control/FormControl.tsx
Source: https://design.freecodecamp.org/registry/form-control/FormControl.tsx
```tsx
import React, { forwardRef } from 'react';
type CommonProps = {
className?: string;
invalid?: boolean;
};
type InputBased = CommonProps &
Omit, 'as'> & {
as?: 'input';
};
type TextareaBased = CommonProps &
Omit, 'as'> & {
as: 'textarea';
};
export type FormControlProps = InputBased | TextareaBased;
export const FormControl = forwardRef<
HTMLInputElement | HTMLTextAreaElement,
FormControlProps
>((props, ref) => {
const {
as = 'input',
className = '',
invalid,
...rest
} = props as CommonProps & {
as?: 'input' | 'textarea';
[key: string]: unknown;
};
const isTextarea = as === 'textarea';
const classes = ['input', isTextarea && 'input--textarea', className]
.filter(Boolean)
.join(' ');
const ariaInvalid = invalid || undefined;
if (isTextarea) {
return (