Package Exports

@gluestack-ui/input
@gluestack-ui/input/lib/commonjs/index.js
@gluestack-ui/input/lib/module/index.js

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/input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@gluestack-style/input

Installation

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

$ yarn add @gluestack-ui/input

# or

$ npm i @gluestack-ui/input

Usage

The Input component is your go-to tool for gathering user input in a sleek and user-friendly text field. Whether you're designing a simple login form or a complex search feature, this component has got you covered. Here's an example how to use this package to create one:

import { Root, Input } from '../components/core/input/styled-components';
import { createInput } from '@gluestack-ui/input';
const InputField = createInput({
  Root,
  Input,
});

Customizing the input:

Default styling of all these components can be found in the components/core/input file. For reference, you can view the source code of the styled input components.

// import the styles
import { Root, Input } from '../components/core/input/styled-components';

// import the createInput function
import { createInput } from '@gluestack-ui/input';

//import any icon
import { searchIcon } from '@gluestack/icons';

// Understanding the API
const InputField = createInput({
  Root,
  Input,
});

// Using the input component
export default () => (
  <Input>
    <Input.Icon pl="$3">
      <Icon as={SearchIcon} />
    </Input.Icon>
    <Input.Input placeholder="your text goes here..." />
  </Input>
);

More guides on how to get started are available here.