pnpm dlx dreamy add fieldField is a wrapper component that provides a way to create accessible form elements.
This is the username you will use to login
<Field.Root>
<Field.Label>
Username
</Field.Label>
<Input placeholder="Enter your username" />
<Field.Hint>
This is the username you will use to login
</Field.Hint>
</Field.Root>- Required
Required indicator is automatically added to the label when the isRequired prop is passed.
<Field.Root isRequired>
<Field.Label>
Username
</Field.Label>
<Input placeholder="Enter your username" />
</Field.Root>- Invalid
Input will be marked as invalid when the isInvalid prop is passed. Also the Field.Error component will be shown if it is present.
<Field.Root isInvalid>
<Field.Label>
Username
</Field.Label>
<Input placeholder="Enter your username" />
</Field.Root>- Disabled
Whole field will be disabled when the isDisabled prop is passed.
<Field.Root isDisabled>
<Field.Label>
Username
</Field.Label>
<Input placeholder="Enter your username" />
</Field.Root> Field error will show only when the Field has isInvalid prop.
This username is too short!
<Field.Root isInvalid>
<Field.Label>
Username
</Field.Label>
<Input placeholder="Enter your username" defaultValue="x" />
<Field.Error>
This username is too short!
</Field.Error>
</Field.Root>Field hint can be used to prompt the user with additional information.
This is the username you will use to login
<Field.Root>
<Field.Label>
Username
</Field.Label>
<Input placeholder="Enter your username" />
<Field.Hint>
This is the username you will use to login
</Field.Hint>
</Field.Root>You can use label, hint, 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.Root
label="Username"
hint="This is the username you will use to login"
error="This username is too short!"
>
<Input placeholder="Enter your username" />
</Field.Root>If you prefer horizontal layout, you can use orientation="horizontal" prop.
<Field.Root orientation="horizontal" maxW="sm">
<Field.Label>Username</Field.Label>
<Input placeholder="Enter your username" />
</Field.Root>