created:7/7/2021

updated:7/7/2021

loc

comments

passed

failed

coverage

50%

CheckBoxField

grommet-controls

3.0.2

Component

browse

docs

issues

import { CheckBoxField } from 'grommet-controls';

Main

browse

docs

issues

() => (
  <Form
    onSubmit={() => console.log('onSubmit')}
    pad={{ horizontal: 'small' }}
    focusFirstChild={false}
  >
    <CheckBoxField
      name="tos"
      label="Terms of service"
      validation={[
        validators.required(),
        validators.True('Please accept the TOS'),
      ]}
    />
    <Box pad="small">
      <Button type="submit" label="Submit" />
    </Box>
  </Form>
)

Properties

	Name	Description	Default
IWithFormFieldProps(7 properties)
	validation	default validation rules ValidationType \| ValidationType[]	-
	name	field name string	-
	label	field label ReactNode	-
	description	field help/description string	-
	controlLabel	if separate - label of the FormField ReactNode	-
	inField	whether the field is in a FormField boolean	-
	children	child component (props: IFieldProps) => any	-
IFieldProps(3 properties)
CheckBoxProps(8 properties)

Commits

Date	Author	Commit Message
8/30/2020	atanasster	update versions for publish
8/30/2020	atanasster	update eslint and add component-controls
8/27/2019	atanasster	initial commit 2.x alpha

3 commits

External dependencies

package	imports	peer
grommet ^2.15.0	CheckBoxPropsCheckBoxBox	*
react ^17.0.1	React	*

Internal dependencies

file	imports
"../WithFormField"	WithFormFieldIWithFormFieldPropsIFieldProps

Component JSX

<WithFormField

WithFormField

from"../WithFormField"

<Box

pad

grommet

^2.15.0

<CheckBox

checkedonChange

grommet

^2.15.0

Stories

Control Label

browse

docs

issues

() => (
  <Form
    onSubmit={() => console.log('onSubmit')}
    pad={{ horizontal: 'small' }}
    focusFirstChild={false}
  >
    <CheckBoxField
      name="tos"
      controlLabel={<Text weight="bold">Terms of service</Text>}
      label="Terms of service"
      validation={[
        validators.required(),
        validators.True('Please accept the TOS'),
      ]}
    />
    <Box pad="small">
      <Button type="submit" label="Submit" />
    </Box>
  </Form>
)

In Field

browse

docs

issues

() => (
  <Form
    onSubmit={() => console.log('onSubmit')}
    pad={{ horizontal: 'small' }}
    focusFirstChild={false}
  >
    <CheckBoxField name="tos" inField={false} label="Terms of service" />
    <Box pad="small">
      <Button type="submit" label="Submit" />
    </Box>
  </Form>
)

input/Tags

validation/ColorInputField

Docs

CheckBoxField

Component

Main

Properties

Commits

External dependencies

Internal dependencies

Component JSX

Stories

Control Label

In Field