ColorInputField

grommet-controls

3.0.2

A Color selection field with form validation

Component

browse

docs

issues

import { ColorInputField } from 'grommet-controls';

Main

browse

docs

issues

() => (
  <Form
    onSubmit={() => console.log('onSubmit')}
    pad={{ horizontal: 'small' }}
    focusFirstChild={false}
  >
    <ColorInputField
      name="color"
      colors={uiColors}
      label="Color"
      validation={[validators.required()]}
    />
    <Box pad="small">
      <Button type="submit" label="Submit" />
    </Box>
  </Form>
)

Properties

Name	Description	Default
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	-
colors	Color palette for the user to choose a color from object	-

Commits

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

2 commits

External dependencies

package	imports	peer
react ^17.0.1	React	*

Internal dependencies

file	imports
"../ColorInput"	ColorInputIColorInputProps
"../WithFormField"	IWithFormFieldPropsWithFormField

Component JSX

<WithFormField

WithFormField

from"../WithFormField"

<ColorInput

ColorInput

from"../ColorInput"

Stories

In Field

browse

docs

issues

() => (
  <Form
    onSubmit={() => console.log('onSubmit')}
    pad={{ horizontal: 'small' }}
    focusFirstChild={false}
  >
    <ColorInputField
      name="colors"
      inField={false}
      colors={uiColors}
      label="Color"
    />
    <Box pad="small">
      <Button type="submit" label="Submit" />
    </Box>
  </Form>
)

validation/CheckBoxField

validation/DateInputField

Docs

ColorInputField

Component

Main

Properties

Commits

External dependencies

Internal dependencies

Component JSX

Stories

In Field