Checkbox

The Checkbox component is used to create a checkbox input with an optional hint and validation status using aria-invalid. It must be used in combination with related Label, Hint, and Error components.

Example Usage

The following example shows a checkbox which indicates that a user accepts terms of service and which has validation error support with a named message bag.

<div class="field @error('terms', 'updateProfileInformation') field--error @enderror">
  <x-hearth-checkbox name="terms" required :checked="old('terms', $user->terms ?? false)" bag="updateProfileInformation" />
  <x-hearth-label for="terms" :value="__('I agree to the terms of service')" />
  <x-hearth-error for="terms" bag="updateProfileInformation" />
</div>

The following example shows a checkbox which indicates whether or not a user wants to reduce motion on a website and which has an associated hint.

<div class="field">
  <x-hearth-checkbox name="reduce_motion" :checked="old('reduce_motion', $user->reduce_motion ?? false)" bag="updateProfileInformation" />
  <x-hearth-label for="reduce_motion" :value="__('Reduce motion')" hinted />
  <x-hearth-hint for="reduce_motion">{{ __('This preference turns off animation on the website.') }}</x-hearth-hint>
</div>