Grid

Ready

<duet-layout center>
  <div slot="main">
    <duet-card>
      <duet-button id="bnError">toggle errors</duet-button>
      <duet-button id="bnValue">toggle placeholders</duet-button>
    </duet-card>
    <duet-card padding="large">
      <duet-fieldset label="Valitse aikaväli">
        <duet-grid responsive alignment="form_distribute">
          <duet-grid-item>
            <duet-date-picker
              name="startdate"
              class="start"
              expand
              margin="none"
              label="Label"
              placeholder="test"
              id="input0"
              echo-placeholder
              caption="test"
              value="2020-06-01"
              error="test"
            ></duet-date-picker>
          </duet-grid-item>
          <duet-grid-item>
            <duet-icon class="icon-arrow" name="navigation-arrow-right" color="currentColor" size="x-small"></duet-icon>
          </duet-grid-item>
          <duet-grid-item>
            <duet-date-picker
              name="enddate"
              class="end"
              expand
              margin="none"
              label="Label"
              direction="left"
              value="2020-06-10"
              error="this is a  is a long error"
            ></duet-date-picker>
          </duet-grid-item>
        </duet-grid>

        <hr />
        <duet-grid responsive alignment="form_distribute">
          <duet-grid-item>
            <duet-input name="enddate" class="end" margin="none" label="Label" expand value="input"></duet-input>
          </duet-grid-item>

          <duet-grid-item>
            <duet-date-picker
              name="startdate"
              class="start"
              id="input2"
              margin="none"
              label="Label"
              expand
              placeholder="test"
              echo-placeholder
              caption="test"
              value="2020-06-01"
              error="test"
            ></duet-date-picker>
          </duet-grid-item>
        </duet-grid>

        <hr />
        <duet-grid responsive alignment="form_distribute">
          <duet-grid-item>
            <duet-input
              name="enddate"
              id="input3"
              class="end"
              label="Label"
              margin="none"
              caption="caption"
              echo-placeholder
              expand
              placeholder="placeholder"
              value="input"
            ></duet-input>
          </duet-grid-item>

          <duet-grid-item>
            <duet-paragraph>some simple text</duet-paragraph>
          </duet-grid-item>
        </duet-grid>
      </duet-fieldset>
    </duet-card>
  </div>
</duet-layout>
<script>
  const i0= document.querySelector("#input0");
  const i1= document.querySelector("#input1");
  const i2= document.querySelector("#input2");
  const i3= document.querySelector("#input3");
  const bnError= document.querySelector("#bnError");
  const bnValue= document.querySelector("#bnValue");

  bnError.onclick=toggleErrors
  bnValue.onclick=togglePlaceholder

  var hasErrors=0
  var echoPlaceholders=false
  function toggleErrors(){
    i0.error= hasErrors ? "this is a super long error this is a super long error this is a super long error this is a super long error this is a super long error" : undefined ;
    i1.error= hasErrors ? "this is a super long error this is a super long error this is a super long error this is a super long error this is a super long error" : undefined ;
    i2.error= hasErrors ? "this is a super long error this is a super long error this is a super long error this is a super long error this is a super long error" : undefined ;
    i3.error= hasErrors ? "this is a super long error this is a super long error this is a super long error this is a super long error this is a super long error" : undefined ;
    hasErrors=!hasErrors
  }

  function togglePlaceholder(){
    i0.setAttribute("echo-placeholder", echoPlaceholders)
    i1.setAttribute("echo-placeholder", echoPlaceholders)
    i2.setAttribute("echo-placeholder", echoPlaceholders)
    i3.setAttribute("echo-placeholder", echoPlaceholders)
    echoPlaceholders=!echoPlaceholders
  }
</script>