Field

Field is the shared control-field: it takes a Switch, Checkbox, or a single RadioGroupItem as its child and lays it beside a label and an optional one-line description, doing the accessible-name (htmlFor) and description (aria-describedby) wiring for you. appearance="card" turns the row into a bordered option card that highlights when its control is checked, and orientation flips between a control-leading row (checkboxes, radios) and a text-leading settings row (the switch on the right). Because it wires by cloning the control, one Field looks and behaves identically whichever control drives it. For a form bound to react-hook-form with validation messages, use Form instead; Field is the lightweight, standalone layout.

Give every Field a label — that IS the control's name. The label is required and is associated by htmlFor, so you don't add a separate aria-label to the control. Add a description only when the effect isn't obvious from the label.

Use card for selectable options, plain for dense settings. A list of option cards (pick-one radios, feature toggles) reads well as card; a long settings screen is calmer as plain rows with a divider. The card's checked-edge highlight only makes sense when one option among several is chosen.

Match orientation to the control. Checkboxes and radios read naturally control-first (start); a switch usually sits at the end of a settings row (end), label on the left. Keep the whole group consistent.

One control per Field. Field clones a single child to wire it. For a group of radios, wrap each RadioGroupItem in its own Field inside one RadioGroup.