<Checkboxes>

Search

Table of contents

Displays checkboxes with fixed multichoice options.

Only <OptionRoot> is a valid child.

Use of <Checkboxes>

<Checkboxes
  name="email"
  isRequired={false}
  labelHtml={{ en: 'Email' }}
  hintHtml={{ en: 'E.g. user@example.com' }}
  validationErrorRequiredHtml={{ en: 'Required' }}
  validationErrorInvalidHtml={{ en: 'Invalid' }}
  choosePromptHtml={{ en: 'Choose an email' }}
  showOptionHints={false}
>
  <OptionRoot>
    <OptionGroup>
      <Option />
      <Option />
    </OptionGroup>
    <Option />
  </OptionRoot>
</Checkboxes>

<Checkboxes>'s props

PropAboutType
choosePromptHtml

Localisable HTML: When multichoice is displayed in a <select> this is the first <option> used as a placeholder value to prompt choosing an option. Any HTML will be removed when displayed using Formally's default renderer.

LocalisedHtml
hintHtml

Localisable HTML: Hint content

LocalisedHtml
isRequired

Whether users are required to fill in this form field.

This setting affects aria-required and whether a * is displayed next to the form field, etc.

boolean
labelHtml

Localisable HTML: Label content

LocalisedHtml
name

The name attribute in HTML (MDN name attribute)

Name of the form control.

Submitted with the form as part of a name:value pair in the <Formally onSubmit> callback prop valuesAsFormNames.

string
showOptionHints

Whether to display option hints.

In some cases (eg. <Select>) the hints may not be used, and/or may have HTML tags removed leaving PlainText.

boolean
tagsById

A list of tags for for this form field.

string[]
validationErrorInvalidHtml

Localisable HTML: invalid validation content

LocalisedHtml
validationErrorRequiredHtml

Localisable HTML: required validation content

LocalisedHtml
id

Component Id.

Must be unique within the form.

string
hasChildrenById

Non-editable.

Used to indicate that this component doesn't have children.

false
hasTagsById

Non-editable.

Used to indicate that this component has tags by id.

true
isFormField

Non-editable.

Used to indicate that this component is a form field.

true
isMultichoice

Non-editable.

Used to indicate that this component is a multichoice form field like <Select>, <Radios> or <Checkboxes>.

true
options

If used in React this is non-editable.

Only use this directly if constructing a document from JavaScript.

OptionNodes
type

Non-editable.

Type of component of "Checkboxes".

"Checkboxes"