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
<Field>
<FieldLabel>
Username
</FieldLabel>
<Input placeholder="Enter your username" />
<FieldHelpText>
This is the username you will use to login
</FieldHelpText>
</Field>You can use label, helpText, error as props to the Field component. This can be helpful when you don't need to apply any additional props or styles to the particular components.
This is the username you will use to login
<Field
label="Username"
helpText="This is the username you will use to login"
error="This username is too short!"
>
<Input placeholder="Enter your username" />
</Field>If you prefer horizontal layout, you can use orientation="horizontal" prop.
<Field orientation="horizontal" maxW="sm">
<FieldLabel>Username</FieldLabel>
<Input placeholder="Enter your username" />
</Field>