import React from "react" ; import type { Story } from "@storybook/react" ; import { Radio , RadioGroupProps } from "@okta/odyssey-react" ; import { Radio as Source } from "../../../../odyssey-react/src" ; import RadioMdx from "./Radio.mdx" ; export default { title : `Components/Radio` , component : Source . Group , parameters : { docs : { page : RadioMdx } } , args : { label : "Speed" , name : "speed" , hint : "Select the speed at which you expect to travel." } , argTypes : { hint : { control : "text" } , error : { control : "text" } , label : { control : "text" } , required : { control : "boolean" } , disabled : { control : "boolean" } , value : { control : "radio" , options : [ "light" , "warp" , "ludicrous" ] } , name : { control : "text" } , onChange : { control : false } } } ; const Template = ( props ) => ( < Radio . Group { ... props } > < Radio . Button label = "Lightspeed" value = "light" / > < Radio . Button label = "Warp speed" value = "warp" / > < Radio . Button label = "Ludicrous speed" value = "ludicrous" / > < /Radio.Group>); export const Default = Template . bind ( { } ) ; Default . args = { } ; export const Disabled = Template . bind ( { } ) ; Disabled . args = { disabled : true } ; export const Invalid = Template . bind ( { } ) ; Invalid . args = { error : "This field is required." } ;