Skip to content
Home

Boolean

Info
Demos
Properties
Events

Demos

Default

<DataInput.Boolean onChange={(value) => console.log('onChange', value)} />

Checkbox

Value: true

<DataInput.Boolean

  variant="checkbox"

  label="Label text"

  value={true}

  onChange={(value) => console.log('onChange', value)}

/>

Value false

<DataInput.Boolean

  variant="checkbox"

  label="Label text"

  value={false}

  onChange={(value) => console.log('onChange', value)}

/>

Checkbox - Required

<DataInput.Boolean

  variant="checkbox"

  label="Set to be required initially"

  onChange={(value) => console.log('onChange', value)}

  validateInitially

  required

/>

Checkbox - Disabled

<DataInput.Boolean

  variant="checkbox"

  label="I am disabled"

  onChange={(value) => console.log('onChange', value)}

  disabled

/>

Checkbox - Error

This is what is wrong...
<DataInput.Boolean

  variant="checkbox"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  error={new Error('This is what is wrong...')}

/>

ToggleButton

Value true

<DataInput.Boolean

  variant="toggle-button"

  label="Label text"

  value={true}

  onChange={(value) => console.log('onChange', value)}

/>

ToggleButton - Value false

<DataInput.Boolean

  variant="toggle-button"

  label="Label text"

  value={false}

  onChange={(value) => console.log('onChange', value)}

/>

TogglButton - Required

<DataInput.Boolean

  variant="toggle-button"

  label="Set to be required initially"

  onChange={(value) => console.log('onChange', value)}

  validateInitially

  required

/>

TogglButton - Disabled

<DataInput.Boolean

  variant="toggle-button"

  label="I am disabled"

  onChange={(value) => console.log('onChange', value)}

  disabled

/>

ToggleButton - Error

This is what is wrong...
<DataInput.Boolean

  variant="toggle-button"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  error={new Error('This is what is wrong...')}

/>

ToggleCheckbox

Value: true

<DataInput.Boolean

  variant="toggle-checkbox"

  label="Label text"

  value={true}

  onChange={(value) => console.log('onChange', value)}

/>

ToggleCheckbox - Value false

<DataInput.Boolean

  variant="toggle-checkbox"

  label="Label text"

  value={false}

  onChange={(value) => console.log('onChange', value)}

/>

ToggleCheckbox - Required

<DataInput.Boolean

  variant="toggle-checkbox"

  label="Set to be required initially"

  onChange={(value) => console.log('onChange', value)}

  validateInitially

  required

/>

ToggleCheckbox - Disabled

<DataInput.Boolean

  variant="toggle-checkbox"

  label="I am disabled"

  onChange={(value) => console.log('onChange', value)}

  disabled

/>

ToggleCheckbox - Error

This is what is wrong...
<DataInput.Boolean

  variant="toggle-checkbox"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  error={new Error('This is what is wrong...')}

/>

Buttons

Value true

<DataInput.Boolean

  variant="buttons"

  label="Label text"

  value={true}

  onChange={(value) => console.log('onChange', value)}

/>

Buttons - Value false

<DataInput.Boolean

  variant="buttons"

  label="Label text"

  value={false}

  onChange={(value) => console.log('onChange', value)}

/>

Buttons - Required

<DataInput.Boolean

  variant="buttons"

  label="Set to be required initially"

  onChange={(value) => console.log('onChange', value)}

  validateInitially

  required

/>

Buttons - Disabled

<DataInput.Boolean

  variant="buttons"

  label="I am disabled"

  onChange={(value) => console.log('onChange', value)}

  disabled

/>

Buttons - Error

This is what is wrong...
<DataInput.Boolean

  variant="buttons"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  error={new Error('This is what is wrong...')}

/>