# `PetalComponents.Field`
[🔗](https://github.com/petalframework/petal_components/blob/v3.2.0/lib/petal_components/field.ex#L1)

# `field`

Renders an input with label and error messages. If you just want an input, check out input.ex

A `%Phoenix.HTML.FormField{}` and type may be passed to the field
to build input names and error messages, or all the attributes and
errors may be passed explicitly.

## Examples

    <.field field={@form[:email]} type="email" />
    <.field label="Name" value="" name="name" errors={["oh no!"]} />

## Attributes

* `id` (`:any`) - the id of the input. If not passed, it will be generated automatically from the field. Defaults to `nil`.
* `name` (`:any`) - the name of the input. If not passed, it will be generated automatically from the field.
* `label` (`:string`) - the label for the input. If not passed, it will be generated automatically from the field.
* `value` (`:any`) - the value of the input. If not passed, it will be generated automatically from the field.
* `type` (`:string`) - the type of input. Defaults to `"text"`. Must be one of `"checkbox"`, `"checkbox-group"`, `"color"`, `"date"`, `"datetime-local"`, `"email"`, `"file"`, `"hidden"`, `"month"`, `"number"`, `"password"`, `"range"`, `"radio-group"`, `"radio-card"`, `"search"`, `"select"`, `"switch"`, `"tel"`, `"text"`, `"textarea"`, `"time"`, `"url"`, or `"week"`.
* `size` (`:string`) - the size of the switch (xs, sm, md, lg or xl) or radio card (sm, md or lg). Defaults to `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, `"lg"`, or `"xl"`.
* `variant` (`:any`) - outline, classic - used by radio-card. Defaults to `"outline"`.
* `viewable` (`:boolean`) - If true, adds a toggle to show/hide the password text. Defaults to `false`.
* `copyable` (`:boolean`) - If true, adds a copy button to the field and disables the input. Defaults to `false`.
* `copy_icon` (`:string`) - Icon name for the copy button. Defaults to `"hero-clipboard-document-solid"`.
* `copied_icon` (`:string`) - Icon name shown after copying. Defaults to `"hero-clipboard-document-check-solid"`.
* `clearable` (`:boolean`) - If true, adds a clear button to clear the field value. Defaults to `false`.
* `no_margin` (`:boolean`) - removes the margin from the field wrapper. Defaults to `false`.
* `field` (`Phoenix.HTML.FormField`) - a form field struct retrieved from the form, for example: @form[:email].
* `errors` (`:list`) - a list of errors to display. If not passed, it will be generated automatically from the field. Format is a list of strings. Defaults to `[]`.
* `checked` (`:any`) - the checked flag for checkboxes and checkbox groups.
* `prompt` (`:string`) - the prompt for select inputs. Defaults to `nil`.
* `options` (`:list`) - the options to pass to Phoenix.HTML.Form.options_for_select/2.
* `multiple` (`:boolean`) - the multiple flag for select inputs. Defaults to `false`.
* `disabled_options` (`:list`) - the options to disable in a checkbox group. Defaults to `[]`.
* `group_layout` (`:string`) - the layout of the inputs in a group (checkbox-group or radio-group). Defaults to `"row"`. Must be one of `"row"`, or `"col"`.
* `empty_message` (`:string`) - the message to display when there are no options available, for checkbox-group or radio-group. Defaults to `nil`.
* `rows` (`:string`) - rows for textarea. Defaults to `"4"`.
* `class` (`:any`) - the class to add to the input. Defaults to `nil`.
* `wrapper_class` (`:any`) - the wrapper div classes. Defaults to `nil`.
* `help_text` (`:string`) - context/help for your field. Defaults to `nil`.
* `label_class` (`:any`) - extra CSS for your label. Defaults to `nil`.
* `selected` (`:any`) - the selected value for select inputs. Defaults to `nil`.
* `required` (`:boolean`) - is this field required? is passed to the input and adds an asterisk next to the label. Defaults to `false`.
* Global attributes are accepted. All other props go on the input. Supports all globals plus: `["autocomplete", "autocorrect", "autocapitalize", "disabled", "form", "max", "maxlength", "min", "minlength", "list", "pattern", "placeholder", "readonly", "required", "size", "step", "value", "name", "multiple", "prompt", "default", "year", "month", "day", "hour", "minute", "second", "builder", "options", "layout", "cols", "rows", "wrap", "checked", "accept"]`.

# `field_error`

Generates a generic error message.

## Slots

* `inner_block` (required)

# `field_help_text`

## Attributes

* `class` (`:any`) - extra classes for the help text. Defaults to `nil`.
* `help_text` (`:string`) - context/help for your field. Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`

# `field_label`

Renders a label.

## Attributes

* `for` (`:string`) - Defaults to `nil`.
* `class` (`:any`) - Defaults to `nil`.
* `required` (`:boolean`) - Defaults to `false`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `field_wrapper`

## Attributes

* `class` (`:any`) - Defaults to `nil`.
* `errors` (`:list`) - Defaults to `[]`.
* `name` (`:string`)
* `no_margin` (`:boolean`) - removes the margin from the field wrapper. Defaults to `false`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

*Consult [api-reference.md](api-reference.md) for complete listing*