Checkbox

Checkboxes allow users to select one or more options from a set.

Basic Checkbox

A simple checkbox with label.

I agree to the terms and conditions

<%= render Rvk::CheckboxComponent.new(
  name: "terms",
  label: "I agree to the terms and conditions"
) %>

Checked State

Pre-check a checkbox.

Subscribe to newsletter

<%= render Rvk::CheckboxComponent.new(
  name: "newsletter",
  label: "Subscribe to newsletter",
  checked: true
) %>

Checkbox Group

Group related checkboxes together.

Dark Mode

Notifications

Analytics

Weekly Reports

<div class="space-y-3">
  <%= render Rvk::CheckboxComponent.new(name: "features[]", value: "dark_mode", label: "Dark Mode", checked: true) %>
  <%= render Rvk::CheckboxComponent.new(name: "features[]", value: "notifications", label: "Notifications", checked: true) %>
  <%= render Rvk::CheckboxComponent.new(name: "features[]", value: "analytics", label: "Analytics") %>
  <%= render Rvk::CheckboxComponent.new(name: "features[]", value: "reports", label: "Weekly Reports") %>
</div>

Sizes

Checkboxes come in 3 sizes.

Small checkbox

Medium checkbox

Large checkbox

<%= render Rvk::CheckboxComponent.new(name: "sm", label: "Small", size: :sm) %>
<%= render Rvk::CheckboxComponent.new(name: "md", label: "Medium", size: :md) %>
<%= render Rvk::CheckboxComponent.new(name: "lg", label: "Large", size: :lg) %>

With Hint

Add helper text for context.

Marketing emails

Receive updates about new features and promotions.

<%= render Rvk::CheckboxComponent.new(
  name: "marketing",
  label: "Marketing emails",
  hint: "Receive updates about new features and promotions."
) %>

Error State

Display validation errors.

I accept the privacy policy

You must accept the privacy policy to continue.

<%= render Rvk::CheckboxComponent.new(
  name: "accept",
  label: "I accept the privacy policy",
  error: "You must accept the privacy policy to continue."
) %>

Disabled State

Disabled checkboxes are non-interactive.

Disabled unchecked

Disabled checked

<%= render Rvk::CheckboxComponent.new(name: "disabled1", label: "Disabled unchecked", disabled: true) %>
<%= render Rvk::CheckboxComponent.new(name: "disabled2", label: "Disabled checked", disabled: true, checked: true) %>

Props

Prop	Type	Default	Description
name	String	required	Form field name
value	String	"1"	Value when checked
label	String	nil	Label text (displayed inline)
size	Symbol	:md	Checkbox size: :sm, :md, :lg
checked	Boolean	false	Whether checkbox is checked
hint	String	nil	Helper text below checkbox
error	String	nil	Error message
required	Boolean	false	Mark as required
disabled	Boolean	false	Disable the checkbox