Explore

RadioGroup

O componente em questão é chamado de RadioGroup e é um componente que recebe um conjunto de propriedades (Props) e retorna uma estrutura de

RadioButtons⁠

Props

As Props do componente são as seguintes:

style: recebe um objeto com as propriedades CSS para estilização do componente.

radioOptions: recebe um array de objetos com as seguintes propriedades:

label: texto que aparece ao lado do RadioButton.

iconName: nome do ícone que aparece dentro do RadioButton.

value: valor que representa o RadioButton.

initialValue: recebe o valor inicial selecionado no RadioGroup.

onChangeValue: recebe uma função que é chamada toda vez que o valor do RadioGroup é alterado.

Funcionamento

O RadioGroup é composto por uma estrutura de RadioButtons, onde apenas um deles pode ser selecionado de cada vez. Ao selecionar um RadioButton, a função onChange é chamada com o valor correspondente. Essa função atualiza o estado do componente com o valor selecionado e chama a função onChangeValue passada como prop.

Uso

Para utilizar o componente RadioGroup, basta importá-lo e passar as Props necessárias. Exemplo:

import React, { useState } from 'react';

import {RadioGroup} from '@vizir-banking/banking-app-core/dist/fuel-design';

const options = [

{ label: 'Opção 1', iconName: 'checkmark', value: 1 },

{ label: 'Opção 2', iconName: 'checkmark', value: 2 },

{ label: 'Opção 3', iconName: 'checkmark', value: 3 },

];

export default function App() {

const [selectedValue, setSelectedValue] = useState(1);

function handleChange(value) {

setSelectedValue(value);

}

return (

<RadioGroup

radioOptions={options}

initialValue={selectedValue}

onChangeValue={handleChange}

);

}

⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.