Form

FormPick

renders selectable options as **clickable cards**. It natively supports `as const` arrays and custom rendering.

Examples

FormPick

API

FormPick

Prop

Type

`PickOption` Type

Prop

Type

Custom Render Slot

Override the default card using renderOption:

<FormPick
  control={form.control}
  name="gateway"
  options={GATEWAYS}
  renderOption={(opt, isSelected) => (
    <div
      className={cn("p-4 border rounded-lg", isSelected && "border-primary")}
    >
      {opt.label}
    </div>
  )}
/>

How is this guide?

FormInput

is the standard text input element.

FormRadio

Renders a list of options with standard circular radio buttons next to label texts (e.g. for gender).

FormPick

Examples

FormPick

API

FormPick

PickOption Type

Custom Render Slot

On this page

`PickOption` Type