ButtonGroup

Props

Name	Type	Description
data	ArrayElement<T>[]	Buttons data, an array of strings, numbers or objects. Use textField attribute with objects. Two or more buttons with the same text are not allowed
defaultValue	Value \| Value[]	Default value
isDisabled	boolean	Disabled state
onChange	(ev: ChangeEvent<T>) => void	Change handler
onClick	(event: SubmitEvent) => void	Click handler
shouldRender	boolean	Pass `false` if you don't want the component to appear
textField	string	Text field in data objects
theme	...
type	'radio' \| 'checkbox'	Only one active button is allowed in the radio mode. Use checkbox if you want many.radio is default
value	T	The value, makes the component controllable
_[className]	[x: string]: unknown	E.g.: `_w-48` adds a css class `w-48` to the component's outer wrapper.


<ButtonGroup
  data={[
    { text: 'One', val: 1 },
    { text: 'Two', val: 2 },
    { text: 'Three', val: 3 }
  ]}
  textField='text'
  onChange={({ component }) => console.log(component.value)}
/>

Validation components' props

Name	Type	Description
form	string	Form name
name	string	Component name
isRequired	boolean	If you don't want the field to be empty
isValid	boolean	Controlled valid state
invalidMessage	ReactNode	Text to show when the value does not match requirements
requiredMessage	ReactNode	Text to show when the field is not filled
shouldValidateUnmounted	boolean	The field can still affect form submission even if it is not rendered
validator	Validator \| PredefinedValidator \| RegExp \| ValidatorObject[]
	interface Validator { (value: any): boolean, }	A validator is a function that takes a value and returns true or false depending on the logic it contains E.g. `(value) => value.length > 4`
	type PredefinedValidator = \| 'creditCardNumber' \| 'email' \| 'url'	See predefined validators
	interface ValidatorObject { validator: PredefinedValidator \| RegExp \| Validator, invalidMessage?: string, }	`ValidatorObject` is useful wnen you need to validate a value against several validators and show inividual messages for each. Just use an array of validator objects. E.g. [ { validator: (value) => value.length > 4, invalidMessage: 'More than 4 sympols please' }, { validator: /^\w+$/, invalidMessage: 'Only a-z, A-Z, 0-9 and _ are allowed' } ]

<>
<ButtonGroup
  form='myForm'
  name='myComponent'
  data={[
    { text: 'One', val: 1 },
    { text: 'Two', val: 2 },
    { text: 'Three', val: 3 }
  ]}
  textField='text'
  onChange={({ component }) => console.log(component.value)}
  type='checkbox'
  isRequired
  requiredMessage='Choose something'
  validator={(val) => val.length >=2}
  invalidMessage='choose at least two values'
/>
<br />
<Button
  form='myForm'
  onClick={({ form }) => console.log(form)}
>
  Submit
</Button>
</>