Usando Antd + React.js, busco crear el siguiente selector grande de "mega opciones" en lugar de la experiencia tradicional de Radio.Button.

Actualmente puedo diseñarlos como componentes de la tarjeta con la opción hoverable activada (para agregar una sombra de cuadro a la tarjeta cuando se desplaza). Me gustaría vincular estas "Tarjetas" como opciones de radio para que sean accesibles en mi estado de formulario al igual que una opción normal de botón de radio.

Diseño actual "similar a una tarjeta": la salida final debe conservar la función de estilo como una opción de radio normal.

 <Form form={form} layout="vertical" name="add-form"> <Form.Item name="type" label="Please select a type below:" rules={[ { required: true, message: 'Please select your type', }, ]} > <Row gutter={16}> <Col md={12}> <Card hoverable title="Radio Button 1" extra={<CheckCircleFilled style={{ color: '#12cc55' }} />} > This is a short description of the radio button. </Card> </Col> <Col md={12}> <Card hoverable title="Radio Button 2" > This is a short description of the radio button. </Card> </Col> </Row> </Form.Item> </Form>

Realmente agradecería que alguien con un poco más de experiencia en componentes personalizados de Antd eche un vistazo a esto y muestre cómo se puede convertir en una opción de radio.

Todos los recursos que he visto hasta ahora no son específicos de Antd o no muestran cómo se pueden usar con formularios Antd. Muy apreciado.