# Create a `wa-color-picker` component

Generated wrapper for the Web Awesome `wa-color-picker` component. When
used as a Shiny input, `input$<input_id>` reflects the component's
current `value` value. Generated from Web Awesome metadata.

## Usage

``` r
wa_color_picker(
  input_id,
  ...,
  class = NULL,
  style = NULL,
  value = NULL,
  disabled = NULL,
  label = NULL,
  hint = NULL,
  name = NULL,
  custom_error = NULL,
  dir = NULL,
  format = NULL,
  lang = NULL,
  opacity = NULL,
  open = NULL,
  placement = NULL,
  required = NULL,
  size = NULL,
  swatches = NULL,
  uppercase = NULL,
  with_hint = NULL,
  with_label = NULL,
  without_format_toggle = NULL,
  hint_slot = NULL,
  label_slot = NULL
)
```

## Arguments

- input_id:

  Shiny input id for the component. This is also used as the rendered
  DOM `id` attribute.

- ...:

  Child content for the component's default slot.

- class:

  Optional CSS class string.

- style:

  Optional inline CSS style string.

- value:

  String. The default value of the form control. Primarily used for
  resetting the form control. This wrapper argument sets the HTML
  `value` attribute, which maps to the component's `defaultValue`
  field/property rather than its live `value` property.

- disabled:

  Boolean. Default: `FALSE`. Disables the color picker.

- label:

  String. Default: `""`. The color picker's label. This will not be
  displayed, but it will be announced by assistive devices. If you need
  to display HTML, you can use the `label` slot\` instead.

- hint:

  String. Default: `""`. The color picker's hint. If you need to display
  HTML, use the `hint` slot instead.

- name:

  String. Default: `null`. The name of the form control, submitted as a
  name/value pair with form data.

- custom_error:

  String. Default: `null`. Optional Web Awesome attribute.

- dir:

  String. Optional Web Awesome attribute.

- format:

  Enumerated string. Allowed values: `hex`, `hsl`, `hsv`, `rgb`.
  Default: `hex`. The format to use. If opacity is enabled, these will
  translate to HEXA, RGBA, HSLA, and HSVA respectively. The color picker
  will accept user input in any format (including CSS color names) and
  convert it to the desired format.

- lang:

  String. Optional Web Awesome attribute.

- opacity:

  Boolean. Default: `FALSE`. Shows the opacity slider. Enabling this
  will cause the formatted value to be HEXA, RGBA, or HSLA.

- open:

  Boolean. Default: `FALSE`. Indicates whether or not the popup is open.
  You can toggle this attribute to show and hide the popup, or you can
  use the [`show()`](https://rdrr.io/r/methods/show.html) and `hide()`
  methods and this attribute will reflect the popup's open state.

- placement:

  Enumerated string. Allowed values: `bottom`, `bottom-end`,
  `bottom-start`, `left`, `left-end`, `left-start`, `right`,
  `right-end`, `right-start`, `top`, `top-end`, `top-start`. Default:
  `bottom-start`. The preferred placement of the color picker's popup.
  Note that the actual placement will vary as configured to keep the
  panel inside of the viewport.

- required:

  Boolean. Default: `FALSE`. Makes the color picker a required field.

- size:

  Enumerated string. Allowed values: `large`, `medium`, `small`.
  Default: `medium`. Determines the size of the color picker's trigger

- swatches:

  Default: `""`. One or more predefined color swatches to display as
  presets in the color picker. Can include any format the color picker
  can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color
  names. Each color must be separated by a semicolon (`;`).
  Alternatively, you can pass an array of color values or an array of
  `{ color, label }` objects to this property using JavaScript. When
  using objects with labels, the label will be used for the swatch's
  accessible name instead of the raw color value.

- uppercase:

  Boolean. Default: `FALSE`. By default, values are lowercase. With this
  attribute, values will be uppercase instead.

- with_hint:

  Boolean. Default: `FALSE`. Only required for SSR. Set to `TRUE` if
  you're slotting in a `hint` element so the server-rendered markup
  includes the hint before the component hydrates on the client.

- with_label:

  Boolean. Default: `FALSE`. Only required for SSR. Set to `TRUE` if
  you're slotting in a `label` element so the server-rendered markup
  includes the label before the component hydrates on the client.

- without_format_toggle:

  Boolean. Default: `FALSE`. Removes the button that lets users toggle
  between format.

- hint_slot:

  The color picker's form hint. Alternatively, you can use the `hint`
  attribute.

- label_slot:

  The color picker's form label. Alternatively, you can use the `label`
  attribute.

## Value

An HTML tag for the component.

## Shiny Bindings

`input$<input_id>` reflects the component's current `value` value.