Dcode Design System

Form: Address

No notes defined.

<label class="wrapper">
    <span class="wrapper__block">
        Address
    </span>

    <select class="text-xs block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
        <option>Australia</option>
        <option>Vietnam</option>
    </select>
    <span class="wrapper__hint"></span>
</label>

<label class="wrapper">
    <!--if input have wrapper : use wrapper__input / if not : use input only-->
    <input type="text" disabled class="wrapper__input wrapper__input--disabled" placeholder="Start typing address" /></label>

<label class="wrapper wrapper--inline">
    <input type="checkbox" class="wrapper__checkbox">
    <span class="wrapper__block wrapper__block--checkbox">Manual Input</span>
</label>

<div class="group-wrapper group-wrapper--first">
    <div class="basis-1/5">
        <label class="wrapper">
            <span class="wrapper__block">
                Unit
            </span>

            <!--if input have wrapper : use wrapper__input / if not : use input only-->
            <input type="text" class="wrapper__input input" placeholder="Unit" />

            <span class="wrapper__hint"></span>
        </label>
    </div>
    <div class="basis-4/5">
        <label class="wrapper">
            <span class="wrapper__block">
                Street Address
            </span>

            <!--if input have wrapper : use wrapper__input / if not : use input only-->
            <input type="text" class="wrapper__input input" placeholder="Start typing address" />

            <span class="wrapper__hint"></span>
        </label>
    </div>
</div>

<div class="group-wrapper">
    <div class="basis-1/3">
        <label class="wrapper">
            <span class="wrapper__block">
                Suburb
            </span>

            <!--if input have wrapper : use wrapper__input / if not : use input only-->
            <input type="text" class="wrapper__input input" placeholder="Suburb" />

            <span class="wrapper__hint"></span>
        </label>
    </div>
    <div class="basis-1/3">
        <label class="wrapper">
            <span class="wrapper__block">
                State/City
            </span>

            <!--if input have wrapper : use wrapper__input / if not : use input only-->
            <input type="text" class="wrapper__input input" placeholder="State" />

            <span class="wrapper__hint"></span>
        </label>
    </div>
    <div class="basis-1/3">
        <label class="wrapper">
            <span class="wrapper__block">
                Postcode
            </span>

            <!--if input have wrapper : use wrapper__input / if not : use input only-->
            <input type="text" class="wrapper__input input" placeholder="Postcode" />

            <span class="wrapper__hint"></span>
        </label>

    </div>
</div>
  • Content: 
    https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJUMg9qwWNHgaiuoDoEgHkn%2Ffractal.dcodegroup.com%3Fnode-id%3D82%253A6671%26t%3DdVycvZF0V0W4lyYO-1
  • URL: /components/raw/input/figma.txt
  • Filesystem Path: components/03-elements/input/figma.txt
  • Size: 182 Bytes
  • Content: 
    .wrapper {
    @apply block leading-none pt-xsSpace;

    &--inline {
        @apply flex py-mdSpace;
    }

    &__block {
        @apply text-tertiary-700 text-xs font-medium mb-3xsSpace inline-block;

        &--checkbox {
            @apply pl-xsSpace
        }
    }

    &__hint {
        @apply text-tertiary-400 text-xs block;
    }

    &__input {
        @apply text-xs block w-full rounded-md border-tertiary-300 placeholder:text-tertiary-400 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50;

        &--disabled {
            @apply block w-full disabled:cursor-not-allowed disabled:bg-tertiary-100 disabled:text-tertiary-400 disabled:ring-gray-200 border-none;
        }
    }

    &__select {
        @apply text-xs block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
    }

    &__text-area {
        @apply mt-1 block w-full h-24 text-xs block w-full rounded-md border-tertiary-300 placeholder:text-tertiary-400 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50;
    }

    &__checkbox {
        @apply flex items-center space-x-xsSpace rounded border border-tertiary-300 w-mdSpace;
    }
}

.select {
    @apply text-xs block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
}

.group-wrapper {
    @apply flex flex-row space-x-2;

    &--first {
        @apply -mt-xsSpace
    }
}
  • URL: /components/raw/input/input.scss
  • Filesystem Path: components/03-elements/input/input.scss
  • Size: 1.5 KB