Relay uses input groups to combine labels, input fields, and error messages together for better user interaction.
<div class="psb psb-w-full" > <.input_group errors={[]} id="input-group--input-group-text" label="Text" placeholder="Enter text" type="text" /> <.input_group errors={[]} id="input-group--input-group-select" label="Select" options={[Admin: "admin", User: "user"]} prompt="Select..." type="select" /> <.input_group errors={[]} id="input-group--input-group-date" label="Date" type="date"/> </div>
<div class="psb psb-w-full" > <.input_group id="input-group--input-group1-radio" label="radio" name="test" options={[{"1", "One"}, {"2", "Two"}, {"3", "Three"}, {"4", "Four"}]} type="radio" /> </div>
<div class="psb psb-w-full" > <.input_group id="input-group--input-group2-checkbox" label="checkbox" name="test" options={[{"1", "One"}, {"2", "Two"}, {"3", "Three"}, {"4", "Four"}]} type="checkbox" /> </div>
This text contains additional information for the input
<div class="psb psb-w-full" > <.input_group description="This text contains additional information for the input" errors={[]} id="input-group-description-text" label="Text" type="time" /> </div>
Error
Error
<div class="psb psb-w-full" > <.input_group errors={["Error"]} id="input-group-error-text" label="Text" type="text"/> <.input_group errors={["Error"]} id="input-group-error-checkbox" label="checkbox" name="test" options={[{"1", "One"}, {"2", "Two"}, {"3", "Three"}, {"4", "Four"}]} type="checkbox" /> </div>
<div class="psb psb-w-full" > <.input_group disabled errors={[]} id="input-group-disabled-text" label="Text" type="time"/> <.input_group disabled errors={[]} id="input-group-disabled-checkbox" label="checkbox" name="test" options={[{"1", "One"}, {"2", "Two"}, {"3", "Three"}, {"4", "Four"}]} type="checkbox" /> </div>
<div class="psb psb-w-full" > <.input_group errors={[]} id="input-group-read-only-text" label="Text" readonly type="time"/> </div>