Ecme logoEcme logo
Dashboard
    Ecommerce
    Project
    Marketing
    Analytic
Network
    BGP
      Peer
      RTBH
DPI
    Overview
    Traffic Logs
    Analysis
      IP Analysis
      Domain Check
      nav.dpi.analysis.unmapped-asns
    Threats
      Blacklists
      nav.dpi.threats.feeds
    Configuration
      Senders
      Ignored Domains
Concepts
    AI
      Chat
      Image
    Projects
      Scrum Board
      List
      Details
      Tasks
      Issue
    Customer
      List
      Edit
      Create
      Details
    Products
      List
      Edit
      Create
    Orders
      List
      Edit
      Create
      Details
    Account
      Settings
      Activity log
      Roles & Permissions
      Pricing
    Help Center
      Support Hub
      Article
      Edit Article
      Manage Article
    Calendar
    File Manager
    Mail
    Chat
UI Components
    Common
      Button
      Grid
      Typography
      Icons
    Feedback
      Alert
      Dialog
      Drawer
      Progress
      Skeleton
      Spinner
      Toast
    Data Display
      Avatar
      Badge
      Calendar
      Cards
      Carousel
      Table
      Tag
      Timeline
      Tooltip
    Forms
      Checkbox
      Date Picker
      Form Control
      Input
      Input Group
      Radio
      Segment
      Select
      Slider
      Switcher
      Time Input
      Upload
    Navigation
      Dropdown
      Menu
      Pagination
      Steps
      Tabs
    Graph
      Charts
      Maps
Authentication
    Sign In
      Simple
      Side
      Split
    Sign Up
      Simple
      Side
      Split
    Forgot Password
      Simple
      Side
      Split
    Reset Password
      Simple
      Side
      Split
    Otp Verification
      Simple
      Side
      Split
Others
    Access Denied
    Landing
Guide
    Documentation
    Shared Component
    Utilities
    Changelog
Copyright © 2026 Ecme All rights reserved.
Term & Conditions | Privacy & Policy

Form Control

Form is used to collect & verify user input data. We use react-hook-form as our form control library, most of our form components were compatible with react-hook-form or others form libraries.

Basic

Sample usage of a simple form with validation.

Form Layout

Form orFormContainer allow us to control all the FormItem layout via a single props.

Form Size

Form orFormContainer allow us to control FormItem size as well.

Label Extra

We can add additional content to the form label with FormItem extra props.

Field-level Validation

React-hook-form supports field-level validation.

Schema Validation

We can use

Dependent Validation

You can use

Async Validation

You can also asynchronous validating a fields.

Dynamic Form

Example usage of dynamic form with FieldArray.
User List

Mixed Form Control

Demostrate different kind of form related component witin a form.
Select...
Select...
:
Personal

The plan for personal.

Team

The plan for team

Business

Talk to us for business plan.

React Hook Form

React Hook Form library is a powerful and flexible solution for managing forms in React applications. It simplifies form handling by providing a set of hooks and utilities that streamline the process of capturing, validating, and submitting form data. With useForm, you can easily manage form state, handle input changes, perform validation, and submit forms with minimal boilerplate code, visit documentation for more detail usage & examples.

Zod

Zod is a TypeScript-first schema declaration and validation library. I'm using the term "schema" to broadly refer to any data type, from a simple string to a complex nested object. Zod is designed to be as developer-friendly as possible. The goal is to eliminate duplicative type declarations. With Zod, you declare a validator once and Zod will automatically infer the static TypeScript type. It's easy to compose simpler types into complex data structures. Visit the official documentation for more detail usage & examples.

API

FormContainer
PropDescriptionTypeDefault
layoutForm layout'horizontal' | 'vertical' | 'inline''vertical'
sizeForm item size'lg' | 'md' | 'sm''md'
labelWidthForm label widthstirng | number 100
FormItem
PropDescriptionTypeDefault
layoutForm layout'horizontal' | 'vertical' | 'inline'-
sizeForm item size'lg' | 'md' | 'sm'-
labelWidthForm label widthstirng | number -
errorMessageError Message that will display when invalid was triggeredstirng-
invalidValidate status of FormItemboolean-
asteriskWhether to display asterisk beside label textboolean-
extraExtra custom content beside label textstring | ReactNode-
htmlForSet sub label htmlForstring-
TABLE OF CONTENT
  • Basic
  • Form Layout
  • Form Size
  • Label Extra
  • Field-level Validation
  • Schema Validation
  • Dependent Validation
  • Async Validation
  • Dynamic Form
  • Mixed Form Control