KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #dsh #dsh-plugin #ai-agent #claude-code #codex #typescript #ai-agents #mcp #cli #rust #deepseek-harness

ui-form-field

★ 21 Open GitHub ↗

ui-form-field based on formik - a simple way to work with Forms in React.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ui-form-field

[![Build Status](https://travis-ci.org/ngduc/ui-form-field.svg?branch=master)](https://travis-ci.org/ngduc/ui-form-field)

A simple way to work with Forms in React.

- Live Demo: [Codesandbox](https://codesandbox.io/s/304nq7w4z6?view=editor&module=/src/examples/BasicExample.tsx)
- Code examples: [Link](/src/examples)

### 🌟 Features

- Lightweight: 22 kb
- Render different `form layouts`: Bootstrap 4, Semantic UI, Spectre and more. (including horizontal layout, inline fields)
- Compatible with `formik`. This is built on top of formik and can be used together with it (for custom fields, etc.)
- Support custom advanced field types: react-select, multi-select, tag input with auto-complete.
- Simplify use cases like: Dynamic (conditional) field rendering, mixing with other components within the form, custom fields.
- Works well on mobile screens.

```JS
$ npm install ui-form-field

import 'ui-form-field/lib/css/bootstrap4.css';
import { FormContainer, Form, Field, Button } from 'ui-form-field';
import { SingleSelect, MultiSelect } from 'ui-form-field/lib/custom'; // requires 'react-select'

<Button type="submit"/>
    <Button>Cancel</Button>
  </Form>
)} />
```

RESULT: (Full form, validation (with yup) & error messages)

[![Screenshot](https://raw.githubusercontent.com/ngduc/ui-form-field/master/screenshot-types.png)](https://codesandbox.io/s/304nq7w4z6?view=editor&module=/src/examples/BasicExample.tsx)

### 📖 Development
```
$ yarn dev        Start Dev mode
$ yarn test       Run tests (jest & puppeteer in headless mode)
$ yarn build      Build (output to ./lib)

$ yarn postbuild  Copy sources or pre-built files to "lib" for publishing to npm. (Note: this will override built files)
```

### 📖 Documentation

[Change Log](/CHANGELOG.md)

#### TODO:
- Support more form layouts: Material, etc.
- More field types: Date Range, etc.
- (File a PR to request any feature, field type, etc.)

### 🙌 Thanks

All contributions are welcome!

[formik](https://github.com/jaredpalmer/formik)

ui-form-field

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README