Form

import { Form, FormTextInput, FormSelect, FormActions } from '@tidbcloud/uikit/biz'

import { Form, FormTextInput, FormSelect } from '@tidbcloud/uikit/biz'
 
function Demo() {
  const handleSubmit = (data) => {
    console.log(data)
  }
 
  return (
    <Form onSubmit={handleSubmit}>
      <FormTextInput name="username" label="Username" required />
      <FormTextInput name="email" label="Email" type="email" required />
      <FormSelect name="role" label="Role" data={['Admin', 'User', 'Guest']} />
    </Form>
  )
}

import { Form, FormTextInput } from '@tidbcloud/uikit/biz'
 
function Demo() {
  return (
    <Form onSubmit={(data) => console.log(data)} defaultValues={{ email: '' }}>
      <FormTextInput
        name="email"
        label="Email"
        rules={{
          required: 'Email is required',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: 'Invalid email address'
          }
        }}
      />
    </Form>
  )
}

import { Form, FormTextInput } from '@tidbcloud/uikit/biz'
 
function Demo() {
  return (
    <Form layout="horizontal" onSubmit={(data) => console.log(data)}>
      <FormTextInput name="firstName" label="First Name" />
      <FormTextInput name="lastName" label="Last Name" />
    </Form>
  )
}

import { Form, FormTextInput } from '@tidbcloud/uikit/biz'
import { Button } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Form withActions={false} onSubmit={(data) => console.log(data)}>
      <FormTextInput name="search" label="Search" />
      <Button type="submit">Search</Button>
    </Form>
  )
}

import { Form, FormTextInput, FormActions } from '@tidbcloud/uikit/biz'
 
function Demo() {
  return (
    <Form
      onSubmit={(data) => console.log(data)}
      onCancel={() => console.log('cancelled')}
      actionsProps={{
        cancelText: 'Reset',
        confirmText: 'Save Changes'
      }}
    >
      <FormTextInput name="name" label="Name" />
    </Form>
  )
}

import { Form, FormTextInput } from '@tidbcloud/uikit/biz'
 
function Demo() {
  return (
    <Form errorMessage="Failed to submit form. Please try again." onSubmit={(data) => console.log(data)}>
      <FormTextInput name="name" label="Name" />
    </Form>
  )
}