Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@gluestack-ui/form-control) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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:

$ 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:

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 of the styled form-control components.

// 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.