Form & Input

Form and input components help you build accessible, validated forms that integrate seamlessly with react-hook-form and provide a consistent user experience across text inputs, selections, toggles, and date pickers.

Choosing the right input

For text entry: Use Input for short text (names, emails, URLs) and Textarea for longer content (descriptions, comments). Both support placeholder text, icons, and clearable states.

For selections: Use Select for dropdown menus when you have a predefined list of options. Use Radio Group when users must choose exactly one option from a small, visible list. Use Checkbox for multiple independent yes/no choices or multi-select scenarios.

For toggles: Use Switch for boolean settings (on/off, enabled/disabled). Switches are ideal for immediate state changes without form submission.

For dates and times: Use Calendar for inline date selection, or Date Picker for a popover date/datetime selector—both integrate with form validation.

For labels and actions: Pair inputs with Label for accessibility. Use Button to trigger form submissions or secondary actions.

Integration with react-hook-form

All form components work with react-hook-form via standard onChange and value props. Use controller or hook into form state to bind inputs:

import { useForm } from "react-hook-form";
import { Input } from "@loke/design-system/input";
import { Label } from "@loke/design-system/label";

export default function MyForm() {
  const { register, handleSubmit } = useForm();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Label htmlFor="name">Name</Label>
      <Input {...register("name")} />
    </form>
  );
}

Components