0.0.22 • Published 2 months ago
@ascendtis/react-a-form v0.0.22
@ascendtis/react-a-form
Ascendtis own's Instant validation AForm component.
Mandatory Steps
Add './node_modules/@ascendtis/react-a-form/dist/esm/*/.{js,ts}' to your
tailwind.config.js
file incontent
section
Example
import { AButton, AForm, AFormInput } from '@ascendtis/react-a-form'
<AForm
onSubmit={(values) => console.log("Form Values:", values)}
values={{
first_name: 'John',
last_name: 'Doe'
}}
>
<div className='grid grid-cols-2 gap-4'>
<AFormInput name={'first_name'} label={'First name'} type='text' placeholder='John' hint='You are too good!' validation={{required: true}} />
<AFormInput name={'last_name'} label={'Last name'} type='text' placeholder='Enter your last name' validation={{required: true}} />
</div>
<div className='grid grid-cols-2 gap-4'>
<AFormInput name={'email'} label={'Email'} type='email' placeholder='Email address' validation={{required: true, email: true}} />
<AFormInput name={'password'} label={'Password'} type='password' placeholder='Password' validation={{required: true}} />
</div>
<div className='grid grid-cols-1'>
<AFormInput name={'newsletters'} label='Subscribe to our newsletters.' type='checkbox' />
</div>
<div className='mt-5'>
<AButton type='submit' style={{ width: '100%'}}>Submit</AButton>
</div>
</AForm>
Available FormInputs
- TextInput
- Checkbox
- Select
- File Input (Drag and Drop)
- Toggle Switch
- Action Button
TextArea
Validations
- Required
- Number
- MinValue
- MaxValue
- MinLength
- MaxLength
- MimeType
- Url
0.0.22
2 months ago
0.0.21
2 months ago
0.0.20
7 months ago
0.0.19
7 months ago
0.0.18
8 months ago
0.0.17
8 months ago
0.0.16
8 months ago
0.0.15
8 months ago
0.0.14
8 months ago
0.0.13
9 months ago
0.0.12
9 months ago
0.0.11
9 months ago
0.0.10
9 months ago
0.0.9
9 months ago
0.0.8
9 months ago
0.0.7
9 months ago
0.0.6
9 months ago
0.0.5
9 months ago
0.0.4
9 months ago
0.0.3
9 months ago
0.0.2
9 months ago
0.0.1
9 months ago