Dcode Design System

Form: All Variants

No notes defined.

<div class="space-y-lgSpace">
    <!--if input have wrapper : use wrapper__input / if not : use input only-->
    <input type="text" class="wrapper__input input" placeholder="Your Name" />

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

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

        <span class="wrapper__hint">This is hint</span>
    </label>

    <label class="wrapper">
        <span class="wrapper__block">
            Select
        </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>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select></label>

    <!-- Multiselect -->

    <label class="block">
        <span class="text-tertiary-700 text-xs font-medium">
            Multiselect
        </span>

        <select class="p-xsSpace !h-auto 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]:p-xsSpace [&>option:checked]:bg-tertiary-200 [&>option:checked]:text-body [&>option:checked]:font-medium" multiple>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
    </label>

    <label class="block leading-none space-y-2xsSpace">
        <span class="text-tertiary-700 text-xs font-medium">
            Select Date
        </span>

        <input onfocus="(this.type='date')" type="text" placeholder="(Icon here) Select Date" class="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 focus:!font-semibold">
    </label>

    <label class="block leading-none space-y-2xsSpace">
        <span class="text-tertiary-700 text-xs font-medium">
            Text Area
        </span>

        <textarea class="form-textarea 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" rows="3" placeholder="Enter some long form content."></textarea>
    </label>

    <label class="flex items-center space-x-xsSpace">
        <input type="checkbox" class="wrapper__checkbox">

        <span class="text-tertiary-700 text-xs">Checkbox</span>
    </label>

    <label class="flex items-center space-x-xsSpace">
        <input type="radio" class="rounded-full border border-tertiary-300">
        <span class="text-tertiary-700 text-xs">
            Radio
        </span>
    </label>
</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