# @gluestack-ui/form-control

> A universal headless form-control component for React Native, Next.js & React

Latest version **0.1.19** (published 2024-11-11) · 0 weekly downloads

## Install

```sh
npm install @gluestack-ui/form-control
pnpm add @gluestack-ui/form-control
yarn add @gluestack-ui/form-control
bun add @gluestack-ui/form-control
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.1.19 |
| Published | 2024-11-11 |
| First published | 2023-02-21 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 31.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5298 |
| Maintainers | rajat693, sravankumarvelangi, vaibhk002, daminipandey, rayan1810, amars29, geekgautam, gluestackadmin, geekashwini, vidhi499, mayankp06, madhavb230100, viraj-10, rohit_singh, meenumakkar, surajahmedc |
| Keywords | react, native, react-native, form-control, gluestack-ui, universal, headless, typescript, component, android, ios, nextjs |

## Links

- npm: https://www.npmjs.com/package/@gluestack-ui/form-control
- Repository: https://github.com/gluestack/gluestack-ui
- Homepage: https://github.com/gluestack/gluestack-ui/tree/main/packages/unstyled/form-control#readme
- Issues: https://github.com/gluestack/gluestack-ui/issues
- npm.io page: https://npm.io/package/@gluestack-ui/form-control

## Dependencies (2)

- [@gluestack-ui/utils](https://npm.io/package/@gluestack-ui/utils.md) ^0.1.14
- [@react-native-aria/focus](https://npm.io/package/@react-native-aria/focus.md) ^0.2.9

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.19 (latest) — 2024-11-11
- 0.1.18 — 2024-07-08
- 0.1.17 — 2024-04-03
- 0.1.16 — 2024-02-12
- 0.1.15 — 2023-10-20
- 0.1.14 — 2023-10-19
- 0.1.13 — 2023-10-19
- 0.1.12 — 2023-10-17
- 0.1.11 — 2023-09-28
- 0.1.10 — 2023-08-10
- 0.1.9 — 2023-06-29
- 0.1.8 — 2023-06-26
- 0.1.7 — 2023-06-14
- 0.1.6 — 2023-06-09
- 0.1.5 — 2023-06-09
- … 6 more at https://npm.io/package/@gluestack-ui/form-control/versions

## README

# @gluestack-ui/form-control

## Installation

To use `@gluestack-ui/form-control`, all you need to do is install the
`@gluestack-ui/form-control` package:

```sh
$ yarn add @gluestack-ui/form-control

# or

$ npm i @gluestack-ui/form-control
```

## Usage

By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required. Here's an example how to use this package to create one:

```jsx
import {
  Root,
  Error,
  ErrorText,
  ErrorIcon,
  Label,
  LabelText,
  LabelAstrick,
  Helper,
  HelperText,
} from '../components/core/form-control/styled-components';
import { createFormControl } from '@gluestack-ui/form-control';
const FormControl = createFormControl({
  Root,
  Error,
  ErrorText,
  ErrorIcon,
  Label,
  LabelText,
  LabelAstrick,
  Helper,
  HelperText,
});
```

## Customizing the form-control:

Default styling of all these components can be found in the components/core/form-control file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/FormControl/index.tsx) of the styled `form-control` components.

```jsx
// import the styles
import {
  Root,
  Error,
  ErrorText,
  ErrorIcon,
  Label,
  LabelText,
  LabelAstrick,
  Helper,
  HelperText,
} from '../components/core/form-control/styled-components';

// import the createFormControl function
import { createFormControl } from '@gluestack-ui/form-control';

// Understanding the API
const FormControl = createFormControl({
  Root,
  Error,
  ErrorText,
  ErrorIcon,
  Label,
  LabelText,
  LabelAstrick,
  Helper,
  HelperText,
});

// Using the FormControl component
export default () => (
  <FormControl>
    <FormControlLabel>
      <FormControlLabelText></FormControlLabelText>
    </FormControlLabel>
    <Input />
    <FormControlHelper>
      <FormControlHelperText></FormControlHelperText>
    </FormControlHelper>
    <FormControlError>
      <FormControlErrorIcon>
        <AlerCircleIcon />
      </FormControlErrorIcon>
      <FormControlErrorText></FormControlErrorText>
    </FormControlError>
  </FormControl>
);
```

More guides on how to get started are available
[here](https://ui.gluestack.io/docs/components/forms/form-control).

---
_Source: https://npm.io/package/@gluestack-ui/form-control · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._