mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-17 05:28:09 +01:00
142 lines
2.9 KiB
Markdown
142 lines
2.9 KiB
Markdown
---
|
|
github:
|
|
suffix: .ts
|
|
description: Display a label and additional informations around a form element.
|
|
---
|
|
|
|
|
|
## Usage
|
|
|
|
Use the FormGroup component around an [Input](/forms/input), [Textarea](/forms/textarea), [Select](/forms/select) or a [SelectMenu](/forms/select-menu) with the `name` prop to automatically associate a `<label>` element with the form element.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
name: 'email'
|
|
label: 'Email'
|
|
code: >-
|
|
|
|
<UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
|
|
---
|
|
|
|
#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: >-
|
|
|
|
<UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
|
|
---
|
|
|
|
#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: >-
|
|
|
|
<UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
|
|
---
|
|
|
|
#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: >-
|
|
|
|
<UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
|
|
---
|
|
|
|
#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: >-
|
|
|
|
<UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
|
|
---
|
|
|
|
#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: >-
|
|
|
|
<UInput placeholder="you@example.com" trailing-icon="i-heroicons-exclamation-triangle-20-solid" />
|
|
---
|
|
|
|
#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.
|
|
|
|
::alert{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
|