Field- The main Field component.FieldLabel- The label for the field.FieldHelpText- The help text for the field.FieldError- The error for the field.
import { Field, FieldLabel, FieldHelpText, FieldError } from "@dreamy-ui/react";This is the username you will use to login
<Field>
<FieldLabel>
Username
</FieldLabel>
<Input placeholder="Enter your username" />
<FieldHelpText>
This is the username you will use to login
</FieldHelpText>
</Field>- Required
<Field isRequired>
<FieldLabel>
Username
</FieldLabel>
<Input placeholder="Enter your username" />
</Field>- Invalid
<Field isInvalid>
<FieldLabel>
Username
</FieldLabel>
<Input placeholder="Enter your username" />
</Field>- Disabled
<Field isDisabled>
<FieldLabel>
Username
</FieldLabel>
<Input placeholder="Enter your username" />
</Field> Field error will show only when the Field has isInvalid prop.
This username is too short!
<Field isInvalid>
<FieldLabel>
Username
</FieldLabel>
<Input placeholder="Enter your username" defaultValue="x" />
<FieldError>
This username is too short!
</FieldError>
</Field>Field help text can be used to prompt the user with additional information.
This is the username you will use to login