Input Group

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>