3.0 KiB
description, links
| description | links | |||||||
|---|---|---|---|---|---|---|---|---|
| Display a label and additional informations around a form element. |
|
Usage
Use the FormGroup component around an Input, Textarea, Select or a SelectMenu with the name prop to automatically associate a <label> element with the form element.
::component-card
props: name: 'email' label: 'Email' code: >-
---#default :u-input{placeholder="you@example.com" icon="i-heroicons-envelope"} ::
Required
Use the required prop to indicate that the form element is required.
::component-card
baseProps: name: 'group-required' props: label: 'Email' required: true code: >-
---#default :u-input{placeholder="you@example.com" icon="i-heroicons-envelope"} ::
Description
Use the description prop to display a description below the label.
::component-card
baseProps: name: 'group-description' props: label: 'Email' description: "We'll only use this for spam." code: >-
---#default :u-input{placeholder="you@example.com" icon="i-heroicons-envelope"} ::
Hint
Use the hint prop to display a hint above the form element.
::component-card
baseProps: name: 'group-hint' props: label: 'Email' hint: 'Optional' code: >-
---#default :u-input{placeholder="you@example.com" icon="i-heroicons-envelope"} ::
Help
Use the help prop to display an help message below the form element.
::component-card
baseProps: name: 'group-help' props: label: 'Email' help: 'We will never share your email with anyone else.' code: >-
---#default :u-input{placeholder="you@example.com" icon="i-heroicons-envelope"} ::
Error
Use the error prop to display an error message below the form element.
When used together with the help prop, the error prop will take precedence.
::component-card
baseProps: name: 'group-error' props: label: 'Email' help: 'We will never share your email with anyone else.' error: "Not a valid email address." code: >-
---#default :u-input{model-value="benjamincanac" placeholder="you@example.com" trailing-icon="i-heroicons-exclamation-triangle-20-solid"} ::
You can also use the error prop as a boolean to mark the form element as invalid.
::callout{icon="i-heroicons-light-bulb"}
The error prop will automatically set the color prop of the form element to red.
::
Props
:component-props
Preset
:component-preset