Violin.css

# Radial Select

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <!-- Default -->
    <div class="inv-radial-select">
        <input id="male" name="sex" type="radio" class="inv-radial-select__radio" value="male" />
        <label class="inv-radial-select__label" for="male">male</label>
    </div>
    <div class="inv-radial-select">
        <input id="female" name="sex" type="radio" class="inv-radial-select__radio" value="female" />
        <label class="inv-radial-select__label" for="female">female</label>
    </div>

    <!-- Disabled -->
    <div class="inv-radial-select">
        <input id="disabled" name="sex" type="radio" class="inv-radial-select__radio" value="disabled" disabled />
        <label class="inv-radial-select__label" for="disabled">disabled</label>
    </div>

`
`

    {{#each radial-select.options as |value|}}
      <div class="inv-radial-select">
        <input
          id="{{ value }}"
          name="sex"
          type="radio"
          class="inv-radial-select__radio"
          value="{{ value }}"
          {{ternary ../disabled "disabled" "" }}
        />
        <label class="inv-radial-select__label" for="{{ value }}">{{ value }}</label>
      </div>
    {{/each}}

`
`

    /* Default */
    {
      "radial-select": {
        "options": [
          "male",
          "female"
        ]
      }
    }

    /* Disabled */
    {
      "disabled": true,
      "radial-select": {
        "options": [
          "disabled"
        ]
      }
    }

`
File:

- Content:
  `

      .inv-radial-select {
        appearance: none;
        display: flex;
      }

      .inv-radial-select__radio {
        display: none;
      }

      .inv-radial-select__label {
        background-color: var(--color-default--white);
        box-shadow: var(--shadow-border-1) var(--color-system--regular);
        color: var(--color-default--dark);
        font-size: 14px;
        font-weight: 600;
        border-radius: 4px;
        min-height: 40px;
        padding-left: 16px;
        padding-right: 16px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: 0.2s box-shadow, 0.2s background-color;
      }

      .inv-radial-select__label:hover {
        box-shadow:
          var(--shadow-border-1) var(--color-system--regular),
          var(--shadow-8) var(--color-default--shadow);
        background-color: var(--color-default--white);
      }

      .inv-radial-select__radio ~ .inv-radial-select__label:active {
        background-color: var(--color-primary--white);
        box-shadow:
          var(--shadow-border-1) var(--color-primary--dark),
          var(--shadow-8) var(--color-primary--shadow);
        color: var(--color-primary--dark);
      }

      .inv-radial-select__radio:disabled ~ .inv-radial-select__label {
        background-color: var(--color-default--white);
        box-shadow: none;
        color: var(--color-default--light);
        cursor: not-allowed;
      }

      .inv-radial-select__radio:checked ~ .inv-radial-select__label {
        background-color: var(--color-primary--white);
        box-shadow: var(--shadow-border-1) var(--color-primary--regular);
        color: var(--color-primary--regular);
      }

      .inv-radial-select__radio:checked ~ .inv-radial-select__label:hover {
        background-color: var(--color-primary--white);
        box-shadow:
          var(--shadow-border-1) var(--color-primary--regular),
          var(--shadow-8) var(--color-primary--shadow);
      }

  `
- URL: /components/raw/radial-select/radial-select.css
- Filesystem Path: src/components/radial-select/radial-select.css
- Size: 1.7 KB

- Handle: @radial-select
- Variants (2): Default , Disabled
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/radial-select/radial-select.hbs

## Radial Select Button

Radio button da aplicação

Tendo a classe base `.inv-radial-select`, e é formado por:

- Um radio button - `.inv-radial-select__radio`
- Uma label - `.inv-radial-select__label`

### Default Radial Select

Componente padrão, comum para ações regulares dos usuários.

`

    <div class="inv-radial-select">
      <input id="male" name="sex" type="radio" class="inv-radial-select__radio" value="male" />
      <label class="inv-radial-select__label" for="male">male</label>
    </div>

    <div class="inv-radial-select">
      <input id="female" name="sex" type="radio" class="inv-radial-select__radio" value="female" />
      <label class="inv-radial-select__label" for="female">female</label>
    </div>

`

Modificadores | Uso
--- | ---
`disabled` | Modifica o radial select com estado de desabilitado

### Radial Select Disabled

Versão de desabilitada do componente.

Basta inserir o atributo `disabled` no input radio.

`

    <div class="inv-radial-select">
      <input id="disabled" name="sex" type="radio" class="inv-radial-select__radio" value="disabled" disabled />
      <label class="inv-radial-select__label" for="disabled">disabled</label>
    </div>

`