TogglePill

A labeled option with an optional note and lock.

Interactive playground

LIVE PREVIEW

Generated code

import { useState } from 'react';
import { TogglePill } from '@vrum/ui';

export default function Demo() {
  const [checked, setChecked] = useState(true);

  return (
    <TogglePill
      label={"Web search"}
      note={"Include current sources"}
      checked={checked}
      disabled={false}
      showLock={false}
      size={"md"}
      onCheckedChange={setChecked}
    />
  );
}

TogglePill props

Prop	Type	Default	Description
`label*`	`string`	none	Visible or accessible label.
`badge`	`React.ReactNode`	none	badge configuration.
`icon`	`React.ReactNode`	none	icon configuration.
`note`	`string`	none	note configuration.
`checked`	`boolean`	none	Controlled selection state.
`defaultChecked`	`boolean`	`false`	default checked configuration.
`showLock`	`boolean`	`false`	show lock configuration.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the component.
`onCheckedChange`	`((checked: boolean) => void)`	none	Called when the selection changes.
`disabled`	`boolean`	none	Disable user interaction.
`name`	`string`	none	name configuration.
`type`	`"submit" \| "reset" \| "button"`	none	type configuration.
`value`	`string \| number \| readonly string[]`	none	Controlled value.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLButtonElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLButtonElement>`	none	on blur configuration.
`onSubmit`	`SubmitEventHandler<HTMLButtonElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLButtonElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLButtonElement>`	none	on select configuration.

TogglePill

A labeled option with an optional note and lock.

Interactive playground

LIVE PREVIEW

Generated code

import { useState } from 'react';
import { TogglePill } from '@vrum/ui';

export default function Demo() {
  const [checked, setChecked] = useState(true);

  return (
    <TogglePill
      label={"Web search"}
      note={"Include current sources"}
      checked={checked}
      disabled={false}
      showLock={false}
      size={"md"}
      onCheckedChange={setChecked}
    />
  );
}

TogglePill props

Prop	Type	Default	Description
`label*`	`string`	none	Visible or accessible label.
`badge`	`React.ReactNode`	none	badge configuration.
`icon`	`React.ReactNode`	none	icon configuration.
`note`	`string`	none	note configuration.
`checked`	`boolean`	none	Controlled selection state.
`defaultChecked`	`boolean`	`false`	default checked configuration.
`showLock`	`boolean`	`false`	show lock configuration.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the component.
`onCheckedChange`	`((checked: boolean) => void)`	none	Called when the selection changes.
`disabled`	`boolean`	none	Disable user interaction.
`name`	`string`	none	name configuration.
`type`	`"submit" \| "reset" \| "button"`	none	type configuration.
`value`	`string \| number \| readonly string[]`	none	Controlled value.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLButtonElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLButtonElement>`	none	on blur configuration.
`onSubmit`	`SubmitEventHandler<HTMLButtonElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLButtonElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLButtonElement>`	none	on select configuration.

TogglePill

Interactive playground

Props

TogglePill props

TogglePill

Interactive playground

Props

TogglePill props