Docplanner Mobile UI

Edit page

RadioGroupField

RadioGroupField allow users to select one option from a set.

Properties

value

string | undefined

Value

items

RadioGroupFieldItem[]

required

Options to choose from

onChange

(value: string) => void

required

onChange callback

disabled

boolean | undefined

Disabled flag

error

ReactNode

Error

hasLeadingRadio

boolean | undefined

Determines whether the radio appears at the beginning or at the end

Basic usage

<MobileScreen isWhite>
  <RadioGroupField
    items={[
      { label: 'Doctors and Clinics', value: 'doctorsAndClinics' },
      { label: 'Only doctors', value: 'doctors' },
      { label: 'Only Clinics', value: 'clinics' },
    ]}
    onChange={console.log}
  />
</MobileScreen>

<MobileScreen isWhite>
  <RadioGroupField
    items={[
      { label: 'Doctors and Clinics', value: 'doctorsAndClinics' },
      { label: 'Only doctors', value: 'doctors' },
      { label: 'Only Clinics', value: 'clinics' },
    ]}
    onChange={console.log}
  />
</MobileScreen>

Error state

<MobileScreen isWhite>
  <RadioGroupField
    items={[
      { label: 'Doctors and Clinics', value: 'doctorsAndClinics' },
      {
        label: 'Only doctors',
        value: 'doctors',
        error: 'wrong specific case',
      },
      { label: 'Only Clinics', value: 'clinics' },
    ]}
    onChange={console.log}
    error="You have to pick one"
  />
</MobileScreen>

<MobileScreen isWhite>
  <RadioGroupField
    items={[
      { label: 'Doctors and Clinics', value: 'doctorsAndClinics' },
      {
        label: 'Only doctors',
        value: 'doctors',
        error: 'wrong specific case',
      },
      { label: 'Only Clinics', value: 'clinics' },
    ]}
    onChange={console.log}
    error="You have to pick one"
  />
</MobileScreen>

Disabled state

<MobileScreen isWhite>
  <RadioGroupField
    disabled
    value="doctors"
    items={[
      { label: 'Doctors and Clinics', value: 'doctorsAndClinics' },
      { label: 'Only doctors', value: 'doctors' },
      { label: 'Only Clinics', value: 'clinics' },
    ]}
    onChange={console.log}
  />
</MobileScreen>

<MobileScreen isWhite>
  <RadioGroupField
    disabled
    value="doctors"
    items={[
      { label: 'Doctors and Clinics', value: 'doctorsAndClinics' },
      { label: 'Only doctors', value: 'doctors' },
      { label: 'Only Clinics', value: 'clinics' },
    ]}
    onChange={console.log}
  />
</MobileScreen>

LeftSide aligned ( hasLeadingRadio )

<MobileScreen isWhite>
  <RadioGroupField
    disabled
    hasLeadingRadio
    value="doctors"
    items={[
      { label: 'Doctors and Clinics', value: 'doctorsAndClinics' },
      { label: 'Only doctors', value: 'doctors' },
      { label: 'Only Clinics', value: 'clinics' },
    ]}
    onChange={console.log}
  />
</MobileScreen>

<MobileScreen isWhite>
  <RadioGroupField
    disabled
    hasLeadingRadio
    value="doctors"
    items={[
      { label: 'Doctors and Clinics', value: 'doctorsAndClinics' },
      { label: 'Only doctors', value: 'doctors' },
      { label: 'Only Clinics', value: 'clinics' },
    ]}
    onChange={console.log}
  />
</MobileScreen>