Checkbox

A control that allows the user to toggle between checked and not checked.

Example

Checkbox

Accept

import { UiLabel, UiCheckbox } from '@altdot/extension';

export default function Command() {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <UiCheckbox id="accept" />
      <UiLabel htmlFor="accept">Accept</UiLabel>
    </div>
  );
}

Checkbox in form

Using checkbox with the Form component.

view-command.tsx

import {
  UiForm,
  UiButton,
  useUiForm,
  UiFormItem,
  UiCheckbox,
  UiFormField,
  UiFormLabel,
  UiFormControl,
  UiFormMessage,
  UiFormDescription,
} from '@altdot/extension';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const formSchema = z.object({
  acceptTerm: z.boolean().optional().default(false),
});
type FormValue = z.infer<typeof formSchema>;

export default function Command() {
  const uiForm = useUiForm<FormValue>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      acceptTerm: false
    }
  });

  function onSubmit(values: FormValue) {
    console.log(values);
  }

  return (
    <UiForm {...uiForm}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <UiFormField
          name="username"
          control={uiForm.control}
          render={({ field }) => (
            <UiFormItem style={{ display: 'flex', alignItems: 'center', }}>
              <UiFormControl>
                <UiCheckbox
                  checked={field.value}
                  onCheckedChange={field.onChange}
                />
              </UiFormControl>
              <div style={{ marginLeft: '0.5rem' }}>
                <UiFormLabel>Accept term</UiFormLabel>
                <UiFormDescription>
                  Description of the checkbox
                </UiFormDescription>
                <UiFormMessage />
              </div>
            </UiFormItem>
          )}
        />
        <UiButton type="submit">Submit</UiButton>
      </form>
    </UiForm>
  )
}

Props

Name	Type	Description
defaultChecked	?(boolean | 'indeterminate')	The checked state of the checkbox when it is initially rendered
checked	?(boolean | 'indeterminate')	Checked state of the checkbox
onCheckedChange	?((value: boolean | 'indeterminate') => void)	Fired when the checked state of the checkbox changes
disabled	?boolean	Whether to disable the checkbox