Selection control

On Shell, List, Form, Stepped flow, Settings, Reports, Help

Email deliveryNot chosen

Source

@react.component
let make = () =>
  <>
    <div>
      <KitReact.Roles.SelectionControl
        kind=Radio
        props={{name: "report-delivery", value: "email"}}
        fact={{
          label: React.string("Email delivery"),
          printedValue: [KitReact.Words.Text("Not chosen")],
          labelProps: {},
          outputProps: {},
        }}
      />
    </div>
  </>

Selection control, checked

Email deliveryChosen

Source

@react.component
let make = () =>
  <>
    <div>
      <KitReact.Roles.SelectionControl
        kind=Radio
        checked=true
        props={{name: "report-delivery-checked", value: "email"}}
        fact={{
          label: React.string("Email delivery"),
          printedValue: [KitReact.Words.Text("Chosen")],
          labelProps: {},
          outputProps: {},
        }}
      />
    </div>
  </>

Selection control, mixed

All invoices

All bookings

All rooms

Source

@react.component
let make = () =>
  <>
    <div>
      <label><KitReact.Roles.SelectionControl kind=Checkbox({mixed: true}) props={{id: "select-all-invoices"}} /><span>{React.string("All invoices")}</span></label>
    </div>
    {React.string(" ")}
    <div>
      <label><KitReact.Roles.SelectionControl kind=Checkbox({mixed: false}) checked=true props={{id: "select-all-bookings"}} /><span>{React.string("All bookings")}</span></label>
    </div>
    {React.string(" ")}
    <div>
      <label><KitReact.Roles.SelectionControl kind=Checkbox({mixed: false}) props={{id: "select-all-rooms"}} /><span>{React.string("All rooms")}</span></label>
    </div>
  </>

Selection control, disabled

Garden roomNot chosenTaken by Oakmere Choir until March

Main HallChosenNo longer free on Tuesdays

Seat at the committee tableChairNot chosenTreasurerNot chosen

Source

@react.component
let make = () => {
  let seats: array<KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind>> = [
    {
      label: React.string("Chair"),
      kind: KitReact.Roles.SelectionControl.Group.Radio,
      checked: false,
            printedValue: [KitReact.Words.Text("Not chosen")],
      props: {},
      controlProps: {name: "disabled-seats", value: "chair"},
      outputProps: {},
      reasonProps: {},
    },
    {
      label: React.string("Treasurer"),
      kind: KitReact.Roles.SelectionControl.Group.Radio,
      checked: false,
      reason: React.string("Taken by Tom Reid"),
      printedValue: [KitReact.Words.Text("Not chosen")],
      props: {},
      controlProps: {name: "disabled-seats", value: "treasurer", disabled: true},
      outputProps: {},
      reasonProps: {},
    },
  ]
  <>
    <div>
      <KitReact.Roles.SelectionControl
        kind=Checkbox({})
        props={{name: "disabled-rooms", value: "garden", disabled: true}}
        fact={{
          label: React.string("Garden room"),
          printedValue: [KitReact.Words.Text("Not chosen")],
          reason: React.string("Taken by Oakmere Choir until March"),
          labelProps: {},
          outputProps: {},
          reasonProps: {},
        }}
      />
    </div>
    <div>
      <KitReact.Roles.SelectionControl
        kind=Checkbox({})
        checked=true
        props={{name: "disabled-rooms", value: "hall", disabled: true}}
        fact={{
          label: React.string("Main Hall"),
          printedValue: [KitReact.Words.Text("Chosen")],
          reason: React.string("No longer free on Tuesdays"),
          labelProps: {},
          outputProps: {},
          reasonProps: {},
        }}
      />
    </div>
    <KitReact.Roles.SelectionControl.Group
      id="react-disabled-seats"
      choices=seats
      legend={React.string("Seat at the committee table")}
                />
  </>
}

Selection control, group

I agree to the terms of hireNot agreedYou accept the terms of hire when you send this request.

I have set autopay in my current system to stop after its last collectionNot confirmed

I have set autopay in my current system to stop after its last collectionNot confirmedStop the old collection before starting a new one.

Report deliveryEmailChosenPostNot chosenReports go out on the first of each month.

Weekend days this rule coversAll weekend daysSaturdayCoveredSundayNot covered

LevelsAll levelsNot chosenNamed levelsChosen

BeginnerIncludedIntermediateIncludedAdvancedNot included

By auditionNot chosen

Audition noteBring soft shoes

Dancers see these levels when they book.

AttendanceLate arrivalNot chosen

Arrived at

19:15

Early departureNot chosen

Left at

20:30

Class remindersEmailNot chosenText messageNot chosenDancers can change these in their own settings.Choose at least one reminder.

Source

@react.component
let make = () => {
  let choices: array<KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind>> = [
    {label: React.string("I agree to the terms of hire"), kind: KitReact.Roles.SelectionControl.Group.Checkbox, checked: false, printedValue: [KitReact.Words.Text("Not agreed")], props: {}, controlProps: {name: "accept-terms"}, outputProps: {}, reasonProps: {}},
  ]
  let wrapChoices: array<KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind>> = [
    {label: React.string("I have set autopay in my current system to stop after its last collection"), kind: KitReact.Roles.SelectionControl.Group.Checkbox, checked: false, printedValue: [KitReact.Words.Text("Not confirmed")], props: {}, controlProps: {name: "stop-old-collection"}, outputProps: {}, reasonProps: {}},
  ]
  let reportChoices: array<KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind>> = [
    {label: React.string("Email"), kind: KitReact.Roles.SelectionControl.Group.Radio, checked: true, printedValue: [KitReact.Words.Text("Chosen")], props: {}, controlProps: {name: "report-delivery-group", value: "email"}, outputProps: {}, reasonProps: {}},
    {label: React.string("Post"), kind: KitReact.Roles.SelectionControl.Group.Radio, checked: false, printedValue: [KitReact.Words.Text("Not chosen")], props: {}, controlProps: {name: "report-delivery-group", value: "post"}, outputProps: {}, reasonProps: {}},
  ]
  let dayChoices: array<KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind>> =
    [("monday", "Monday", true), ("tuesday", "Tuesday", false), ("wednesday", "Wednesday", true), ("thursday", "Thursday", false), ("friday", "Friday", false)]->Array.map(((value, label, checked)): KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind> => {
      label: React.string(label), kind: KitReact.Roles.SelectionControl.Group.Checkbox, checked, printedValue: [KitReact.Words.Text(checked ? "Covered" : "Not covered")], props: {}, controlProps: {name: "rule-days", value}, outputProps: {}, reasonProps: {},
    })
  let weekendChoices: array<KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind>> =
    [("saturday", "Saturday", true, "Set by the opening hours"), ("sunday", "Sunday", false, "Closed on Sundays")]->Array.map(((value, label, checked, reason)): KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind> => {
      label: React.string(label), kind: KitReact.Roles.SelectionControl.Group.Checkbox, checked, reason: React.string(reason), printedValue: [KitReact.Words.Text(checked ? "Covered" : "Not covered")], props: {}, controlProps: {name: "rule-weekend", value, disabled: true}, outputProps: {}, reasonProps: {},
    })
  let levelNames: array<KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind>> =
    [("beginner", "Beginner", true), ("intermediate", "Intermediate", true), ("advanced", "Advanced", false)]->Array.map(((value, label, checked)): KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind> => {
      label: React.string(label), kind: KitReact.Roles.SelectionControl.Group.Checkbox, checked, printedValue: [KitReact.Words.Text(checked ? "Included" : "Not included")], props: {}, controlProps: {name: "class-level-names", value}, outputProps: {}, reasonProps: {},
    })
  let levelChoices: array<KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.RadioGroup.kind>> = [
    {label: React.string("All levels"), kind: KitReact.Roles.SelectionControl.RadioGroup.Radio, checked: false, printedValue: [KitReact.Words.Text("Not chosen")], props: {}, controlProps: {name: "class-levels", value: "all"}, outputProps: {}, reasonProps: {}},
    {
      label: React.string("Named levels"), kind: KitReact.Roles.SelectionControl.RadioGroup.RadioFields({value: "named", fields: <KitReact.Roles.SelectionControl.Group id="class-levels-named" choices=levelNames />}), checked: true, printedValue: [KitReact.Words.Text("Chosen")], props: {}, controlProps: {name: "class-levels"}, outputProps: {}, reasonProps: {},
    },
    {
      label: React.string("By audition"), kind: KitReact.Roles.SelectionControl.RadioGroup.RadioFields({value: "audition", fields: <KitReact.Roles.FormGroup id="class-levels-audition-note-form-group"
        label={React.string("Audition note")}
        labelProps={{htmlFor: "class-levels-audition-note"}}
        controlProps={{id: "class-levels-audition-note", name: "audition-note"}} controlValue="Bring soft shoes" printedValue={React.string("Bring soft shoes")}
        kind=Text(Wide)
      />}), checked: false, printedValue: [KitReact.Words.Text("Not chosen")], props: {}, controlProps: {name: "class-levels"}, outputProps: {}, reasonProps: {},
    },
  ]
  let attendanceChoices: array<KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind>> = [
    {
      label: React.string("Late arrival"),
      kind: KitReact.Roles.SelectionControl.Group.CheckboxFields({
        value: "late",
        fields: <KitReact.Roles.FormGroup
          id="attendance-arrived-at"
          label={React.string("Arrived at")}
          printedValue={<time dateTime="19:15"> {React.string("19:15")} </time>}
          kind={KitReact.Roles.TimeField.control({
            name: "arrived_at",
            reader: Specimen_Reader.reader,
            value: Clock(KitReact.Time.clock(Specimen_Reader.reader, {hour: 19, minute: 15})),
          })}
        />,
      }),
      printedValue: [KitReact.Words.Text("Not chosen")],
      controlProps: {name: "attendance[]"},
    },
    {
      label: React.string("Early departure"),
      kind: KitReact.Roles.SelectionControl.Group.CheckboxFields({
        value: "early",
        fields: <KitReact.Roles.FormGroup
          id="attendance-left-at"
          label={React.string("Left at")}
          printedValue={<time dateTime="20:30"> {React.string("20:30")} </time>}
          kind={KitReact.Roles.TimeField.control({
            name: "left_at",
            reader: Specimen_Reader.reader,
            value: Clock(KitReact.Time.clock(Specimen_Reader.reader, {hour: 20, minute: 30})),
          })}
        />,
      }),
      printedValue: [KitReact.Words.Text("Not chosen")],
      controlProps: {name: "attendance[]"},
    },
  ]
  let reminderChoices: array<KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind>> = [
    {label: React.string("Email"), kind: KitReact.Roles.SelectionControl.Group.Checkbox, checked: false, help: React.string("Sent the evening before each class."), printedValue: [KitReact.Words.Text("Not chosen")], props: {}, controlProps: {name: "class-reminders", value: "email"}, outputProps: {}, reasonProps: {}},
    {label: React.string("Text message"), kind: KitReact.Roles.SelectionControl.Group.Checkbox, checked: false, reason: React.string("Add a mobile number to get texts."), help: React.string("Sent two hours before each class."), printedValue: [KitReact.Words.Text("Not chosen")], props: {}, controlProps: {name: "class-reminders", value: "text", disabled: true}, outputProps: {}, reasonProps: {}},
  ]
  <div>
    <KitReact.Roles.SelectionControl.Group
      id="request-terms"
      choices
            help={React.string("You accept the terms of hire when you send this request.")}
          />
    <KitReact.Roles.SelectionControl.Group
      id="selection-wrap-choice"
      choices=wrapChoices
                      />
    <KitReact.Roles.SelectionControl.Group
      id="selection-wrap-help"
      choices={wrapChoices->Array.map(choice => {...choice, controlProps: {name: "stop-old-collection-with-help"}})}
            help={React.string("Stop the old collection before starting a new one.")}
          />
    <KitReact.Roles.SelectionControl.Group
      id="report-delivery"
      choices=reportChoices
      legend={React.string("Report delivery")}
      help={React.string("Reports go out on the first of each month.")}
          />
    <KitReact.Roles.SelectionControl.Group
      id="rule-days"
      choices=dayChoices
      legend={React.string("Weekdays this rule covers")}
      heading={React.string("All weekdays")}
                />
    <KitReact.Roles.SelectionControl.Group
      id="rule-weekend"
      choices=weekendChoices
      legend={React.string("Weekend days this rule covers")}
      heading={React.string("All weekend days")}
                />
    <KitReact.Roles.SelectionControl.RadioGroup
      id="class-levels"
      choices=levelChoices
      legend={React.string("Levels")}
      help={React.string("Dancers see these levels when they book.")}
          />
    <KitReact.Roles.SelectionControl.Group
      id="attendance"
      choices=attendanceChoices
      legend={React.string("Attendance")}
    />
    <KitReact.Roles.SelectionControl.Group
      id="class-reminders"
      choices=reminderChoices
      legend={React.string("Class reminders")}
      help={React.string("Dancers can change these in their own settings.")}
      error={React.string("Choose at least one reminder.")}
    />
  </div>
}

Selection control, group error

I agree to the terms of hireNot agreedYou accept the terms of hire when you send this request.Accept the terms of hire before you send your request.

I agree to the terms of hireNot agreedAccept the terms of hire before you send your request.

Report deliveryEmailNot chosenPostNot chosenReports go out on the first of each month.Choose how your reports reach you.

Source

@react.component
let make = () => {
  let choices: array<KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind>> = [
    {label: React.string("I agree to the terms of hire"), kind: KitReact.Roles.SelectionControl.Group.Checkbox, checked: false, printedValue: [KitReact.Words.Text("Not agreed")], props: {}, controlProps: {name: "accept-terms-unaccepted"}, outputProps: {}, reasonProps: {}},
  ]
  let reportChoices: array<KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind>> = [
    {label: React.string("Email"), kind: KitReact.Roles.SelectionControl.Group.Radio, checked: false, printedValue: [KitReact.Words.Text("Not chosen")], props: {}, controlProps: {name: "report-delivery-unchosen", value: "email"}, outputProps: {}, reasonProps: {}},
    {label: React.string("Post"), kind: KitReact.Roles.SelectionControl.Group.Radio, checked: false, printedValue: [KitReact.Words.Text("Not chosen")], props: {}, controlProps: {name: "report-delivery-unchosen", value: "post"}, outputProps: {}, reasonProps: {}},
  ]
  <div>
    <KitReact.Roles.SelectionControl.Group
      id="request-terms-unaccepted"
      choices
      help={React.string("You accept the terms of hire when you send this request.")}
      error={React.string("Accept the terms of hire before you send your request.")}
    />
    <KitReact.Roles.SelectionControl.Group
      id="request-terms-error-only"
      choices={choices->Array.map(choice => {...choice, controlProps: {name: "accept-terms-error-only"}})}
      error={React.string("Accept the terms of hire before you send your request.")}
    />
    <KitReact.Roles.SelectionControl.Group
      id="report-delivery-unchosen"
      choices=reportChoices
      legend={React.string("Report delivery")}
      help={React.string("Reports go out on the first of each month.")}
      error={React.string("Choose how your reports reach you.")}
    />
  </div>
}

Previous, Ways in Next, Record picker

Human support

Selection control

Selection control, checked

Selection control, mixed

Selection control, disabled

Selection control, group

Selection control, group error