Radio Button

RadioButton - it looks like a button but works like and can be used in situations where only one option can be chosen

DateTimeRadioGroup - used specifically for selecting a time and date from a list as part of a Formik form.

Examples

Simple Radio Button

<Formik initialValues={{radio: ""}} onSubmit={()=>{}}> 
 <Grid gridGap={2} width={20}>
  <RadioButton   
    inputId='btn'
    value='inputId'
    name='radio'
    selected={true}
  />
 </Grid>
</Formik>

Radio Button Group

<Formik initialValues={{ radioOne: "One" }}>
  <Form>
    <RadioButton
    value="One"
    name='radioOne'
    label="One" />

    <RadioButton
    value="Two"
    name='radioOne'
    label="Two"
    />
  </Form>  
</Formik>

Content Radio

<Formik initialValues={{option1: ""}} onSubmit={()=>{}}>
<Grid gridGap={2} width={200}>
  <ContentRadio name="option1" value='Yes'>
    <Text>Yes</Text>
  </ContentRadio>
 </Grid> 
</Formik>

Content Radio Group

<Formik initialValues={{ optionOne: "" }}>
  <Grid gridGap={2} width={200}>
    <ContentRadio name="optionOne" value='Yes'>
      <Text>Yes</Text>
    </ContentRadio>
    <ContentRadio name="optionOne" value='No'>
      <Text>No</Text>
    </ContentRadio>
    <ContentRadio name="optionOne" value='Maybe'>
      <Text>Maybe</Text>
    </ContentRadio>
    
  </Grid>
</Formik>

Time Slot

<Formik initialValues={{ timeSlotOption: "" }}>
  <Grid gridGap={2} width={400}>

    Activity
    <TimeSlot name="timeSlotOption" value="activity">
      <TimeSlotContent>
        <TimeSlotTag content={['09:00', '-', '10:30']} />
      </TimeSlotContent>
      <TimeSlotContent>
        <Text fontStyle="p2">Available</Text>
      </TimeSlotContent>
    </TimeSlot>
    
    <br />
    Rental
    <TimeSlot name="timeSlotOption" value="rental">
      <TimeSlotContent>
        <Text fontStyle="p2">09:00-09:30</Text>
        <TimeSlotTag content={['Monthly']} />
      </TimeSlotContent>
      <Divider position="vertical" />
      <TimeSlotContent>
        <Price pence={4500} currency="gbp" fontStyle="h4" />
      </TimeSlotContent>
    </TimeSlot>

     <br />
     Membership
    <TimeSlot name="timeSlotOption" value="membership">
      <TimeSlotContent>
        <TimeSlotTag content={['Monthly']} />
      </TimeSlotContent>
      <TimeSlotContent>
        <Text fontStyle="p3">Club Membership (5 Athletes)</Text>
      </TimeSlotContent>
      <TimeSlotContent>
        <Price pence={4500} currency="gbp" fontStyle="h5" />
      </TimeSlotContent>
    </TimeSlot>
    
    <br />


    Membership (disabled)
    <TimeSlot name="timeSlotOption" value="membership" disabled>
      <TimeSlotContent>
        <TimeSlotTag content={['Monthly']} />
      </TimeSlotContent>
      <TimeSlotContent>
        <Text fontStyle="p2">Available</Text>
      </TimeSlotContent>
    </TimeSlot>
  </Grid>
</Formik>