Recipes
Example Input Form Validations
.
Success message
Error message
_33<div_33 style={{_33 display: 'flex',_33 flexDirection: 'column',_33 justifyContent: 'space-between',_33 gap: '24px',_33 }}_33>_33 <FormInput type="text" placeholder="Input text" />_33 <FormInput type="text" value="Input complete" />_33 <FormGroup required valid={true}>_33 <FormInput_33 type="text"_33 value="Input success"_33 valid={true}_33 />_33 </FormGroup>_33 <FormGroup valid={false}>_33 <FormInput_33 type="text"_33 value="Input error"_33 valid={false}_33 />_33 <FormValidationMessage valid={false}>_33 Error message_33 </FormValidationMessage>_33 </FormGroup>_33 <FormInput type="text" value="Input disabled" disabled />_33 <FormInput_33 type="text"_33 value="When was the last time when you bought something"_33 />_33 </div>
Example Textarea Form
.
_14<div_14 style={{_14 display: 'flex',_14 flexDirection: 'column',_14 justifyContent: 'space-between',_14 gap: '24px',_14 }}_14>_14 <FormTextarea placeholder="This is placeholder text for textarea." />_14_14 <FormTextarea value="Input complete" />_14_14 <FormTextarea value="Input disabled" disabled={true} />_14</div>
Example Textarea Form Validations
.
This field is required.
Field is OK!
_27<div_27 style={{_27 display: 'flex',_27 flexDirection: 'column',_27 justifyContent: 'space-between',_27 gap: '24px',_27 }}_27>_27 <FormGroup required valid={false}>_27 <FormTextarea value="Input error" valid={false} touched={true} />_27 <FormValidationMessage valid={false}>_27 This field is required._27 </FormValidationMessage>_27 </FormGroup>_27_27 <FormGroup required valid={true}>_27 <FormTextarea value="Input success" valid={true} touched={true} />_27 </FormGroup>_27_27 <FormGroup required valid={true}>_27 <FormTextarea_27 value="Input success with success validation message"_27 valid={true}_27 />_27 <FormValidationMessage valid>Field is OK!</FormValidationMessage>_27 </FormGroup>_27</div>
Simple Form Example
.
_11<Form onSubmit={handleSubmit}>_11 <FormFieldset label="This is label for this fieldset">_11 <FormInput type="email" />_11 <FormInput type="password" />_11 </FormFieldset>_11 <FormFieldset label="Another label for fieldset">_11 <FormInput type="email" />_11 <FormInput type="password" />_11 </FormFieldset>_11 <button type="submit">Send form</button>_11</Form>
Extended Form Example
.
_10ble ble